A text input that suggests values while you type. Unlike Combobox, the user can
keep any text, so use it for free fields like a city, a tag or a search term.
Pass the suggestions in data and name the field with aria-label, or with a visible label.
onChange receives the text on every keystroke and when a suggestion is picked.
Use { value, label, disabled } objects. The input receives the value; the list shows the label.
Use filled, light, ghost or subtle with a type, as in Combobox.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the suggestions | Array<string / ComboboxOption> | ComboboxOption | - |
| value | text of the input, to control it | string | - | - |
| initialValue | text at the start | string | - | '' |
| onChange | called with the text | (value: string) => void | - | - |
| filter | decides which suggestions match the text | (option, text) => boolean | - | contains, case insensitive |
| placeholder | text shown when the input is empty | string | - | - |
| disabled | disable the component | boolean | - | false |
| type | color of the field | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | default |
| rounded | round the corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| ... | native props, passed to the input | InputHTMLAttributes | 'aria-label', 'name', 'id', ... | - |
The ref points at the input.
The input has role="combobox" and points at the highlighted suggestion with aria-activedescendant. The list is a listbox of option elements.
| Key | Action |
|---|---|
| Arrow Down and Up | Open the list, and move between the suggestions |
| Enter | Use the highlighted suggestion. Without one, keeps the text |
| Escape | Close the list |
| Tab | Close the list and keep the text |
A screen reader hears how many suggestions match while the user types. Give the input a name with aria-label or aria-labelledby.