Skip to main content

MultiSelectFilter

Result
Loading...
Live Editor
function Example() {
	const [filterOption, setFilterOption] = React.useState();

	return (
		<MultiSelectFilter
			id="demo-component-one"
			filterName="Multi Select Filter"
			options={[
				{ label: 'Up To Date', value: 'UpToDate' },
				{ label: 'Missing Credentials', value: 'MissingCredentials' },
				{ label: 'Disconnected', value: 'Disconnected' },
			]}
			onApply={(event, { value }) => setFilterOption(value)}
			value={filterOption}
		/>
	);
}

Searchable​

The searchable prop enables search UI within the filter that functions as an autocomplete.

Result
Loading...
Live Editor
function Example() {
	const [filterOption, setFilterOption] = React.useState([
		'o1',
		'o2',
		'o3',
		'o4',
		'o5',
		'o6',
		'o7',
		'o8',
		'o9',
		'o10',
		'o11',
	]);

	return (
		<MultiSelectFilter
			searchable
			id="demo-component-searchable"
			filterName="Multi Select Filter"
			options={[
				{ label: 'Option 1', value: 'o1' },
				{ label: 'Option 2', value: 'o2' },
				{ label: 'Option 3', value: 'o3' },
				{ label: 'Option 4', value: 'o4' },
				{ label: 'Option 5', value: 'o5' },
				{ label: 'Option 6', value: 'o6' },
				{ label: 'Option 7', value: 'o7' },
				{ label: 'Option 8', value: 'o8' },
				{ label: 'Option 9', value: 'o9' },
				{ label: 'Option 10', value: 'o10' },
				{ label: 'Option 11', value: 'o11' },
			]}
			onApply={(event, { value }) => setFilterOption(value)}
			value={filterOption}
		/>
	);
}

Selection display​

The selectionDisplay prop controls how the current selection is summarized in the filter crouton (trigger):

  • count — always shows only the number of selected items, e.g. Filter (3)
  • none — shows only the filter name with no selection summary

When omitted, names are shown until three items are selected, after which a count is shown.

Result
Loading...
Live Editor
function Example() {
	const [filterOption, setFilterOption] = React.useState(['UpToDate', 'MissingCredentials']);

	return (
		<MultiSelectFilter
			id="demo-component-selection-display"
			filterName="Multi Select Filter"
			selectionDisplay="count"
			options={[
				{ label: 'Up To Date', value: 'UpToDate' },
				{ label: 'Missing Credentials', value: 'MissingCredentials' },
				{ label: 'Disconnected', value: 'Disconnected' },
			]}
			onApply={(event, { value }) => setFilterOption(value)}
			value={filterOption}
		/>
	);
}

Analytics​

The MultiSelectFilter component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'MultiSelectFilter',
	actions: {
		onApply: { type: 'MULTISELECTFILTER_APPLY', payload: 'Apply' },
	},
};

Props​