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} /> ); }

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} /> ); }

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}
        />
    );
}

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