Skip to main content

AutoComplete

The AutoComplete component provides a text input with a list of options that can be selected. By default, the results are filtered based on the text entered into the input and display as the user enters text.

Result
Loading...
Live Editor
<AutoComplete label="AutoComplete">
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</AutoComplete>

With sections​

Result
Loading...
Live Editor
<AutoComplete label="AutoComplete with Sections">
	<Section key="header-1" title="Fruit">
		<Item key="apples">Apples</Item>
		<Item key="bananas">Bananas</Item>
		<Item key="oranges">Oranges</Item>
	</Section>
	<Section key="header-2" title="Vegetables">
		<Item key="beans">Beans</Item>
		<Item key="cabbages">Cabbages</Item>
		<Item key="onions">Onions</Item>
	</Section>
	<Section key="header-3" title="Cheese">
		<Item key="cheddar">Cheddar</Item>
		<Item key="mozzarella">Mozzarella</Item>
		<Item key="swiss">Swiss</Item>
	</Section>
</AutoComplete>

Controlled component​

Result
Loading...
Live Editor
const items = [{ value: 'One' }, { value: 'Two' }, { value: 'Three' }, { value: 'Four' }];

function Example() {
	const [value, setValue] = useState('Two');
	const [selectedKey, setSelectedKey] = useState('Two');

	return (
		<AutoComplete
			defaultItems={items}
			label="AutoComplete"
			onChange={setValue}
			onSelectionChange={setSelectedKey}
			value={value}
		>
			{(item) => <Item key={item.value}>{item.value}</Item>}
		</AutoComplete>
	);
}

render(<Example />);

Analytics​

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

export default {
	value: 'AutoComplete',
	actions: {
		onChange: { type: 'AUTOCOMPLETE_CHANGE', payload: 'Change' },
		onSelectionChange: { type: 'AUTOCOMPLETE_SELECTION_CHANGE', payload: 'Change' },
	},
};

Props​