Skip to main content

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

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

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​