Extends native <input /> component

import {
Combobox,
ComboboxInput,
ComboboxPopover,
ComboboxList,
ComboboxOption,
} from 'minerva-ui';

Examples

Client-Side Search

() => {
const [search, setSearch] = useState('');
const items = ['apple', 'banana', 'kiwi', 'orange'];
return (
<Combobox
aria-label="choose a fruit"
openOnFocus
onSelect={item => {
setSearch(item);
}}
>
<ComboboxInput value={search} onChange={e => setSearch(e.target.value)} />
<ComboboxPopover>
<ComboboxList>
{items
.filter(item => item.includes(search))
.map(item => (
<ComboboxOption value={item} />
))}
</ComboboxList>
</ComboboxPopover>
</Combobox>
);
};

Props

Props related to the Combobox component.

NameTypeIs RequiredDefaultDescription
onSelectfunctionoptionalnoneCalled with the selection value when the user makes a selection from the list. (value: string) => void
openOnFocusbooleanoptionalfalseIf true, the popover opens when focus is on the text box.

Props related to the Combobox Input component.

NameTypeIs RequiredDefaultDescription
selectOnClickbooleanoptionalfalseIf true, when the user clicks inside the text box the current value will be selected. Use this if the user is likely to delete all the text anyway (like the URL bar in browsers).
autocompletebooleanoptionaltrueDetermines if the value in the input changes or not as the user navigates with the keyboard. If true, the value changes, if false the value doesn't change.