Skip to main content

CollapsibleMultiSelectFilter

Functionally identical to the MultiSelectFilter, but enables collapse UI.

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

	return (
		<CollapsibleMultiSelectFilter
			id="demo-component-basic"
			filterName="Collapsible Multi Select Filter"
			options={[
				{ label: 'Up To Date', id: 'UpToDate' },
				{ label: 'Missing Credentials', id: 'MissingCredentials' },
				{
					label: 'Errors',
					id: 'Errors',
					children: [
						{ label: 'Disconnected', id: 'Disconnected' },
						{ label: 'Broken', id: 'Broken' },
					],
				},
				{
					label: 'Foo',
					id: 'Foo',
					children: [
						{ label: 'Bar', id: 'Bar' },
						{ label: 'Baz', id: 'Baz' },
					],
				},
			]}
			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();

	return (
		<CollapsibleMultiSelectFilter
			searchable
			id="demo-component-searchable"
			filterName="Searchable Multi Select Filter"
			options={[
				{ label: 'Up To Date', id: 'UpToDate' },
				{ label: 'Missing Credentials', id: 'MissingCredentials' },
				{
					label: 'Errors',
					id: 'Errors',
					children: [{ label: 'Disconnected', id: 'Disconnected' }],
				},
			]}
			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 the number selected, and none shows only the filter name. 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(['Disconnected', 'Broken', 'Bar']);

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

Analytics​

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

export default {
	value: 'CollapsibleMultiSelectFilter',
	actions: {
		onApply: { type: 'COLLAPSIBLEMULTISELECTFILTER_APPLY', payload: 'Apply' },
	},
};

Props​