SingleSelectFilter

Result

Loading...

Live Editor

function Example() { const [filterOption, setFilterOption] = React.useState(); return ( <SingleSelectFilter id="demo-component-one" filterName="Single 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 (
        <SingleSelectFilter
            id="demo-component-one"
            filterName="Single 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(); return ( <SingleSelectFilter searchable id="demo-component-searchable" filterName="Single 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 (
        <SingleSelectFilter
            searchable
            id="demo-component-searchable"
            filterName="Single 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}
        />
    );
}

Analytics

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

export default {
	value: 'SingleSelectFilter',
	actions: {
		onApply: { type: 'SINGLESELECTFILTER_APPLY', payload: 'Apply' },
	},
};

Props