Combobox
Accessible combobox with list autocomplete (APG "combobox with list autocomplete, none selected"): a real <input> that filters the list as you type, with DOM focus staying in the field and the active option tracked through aria-activedescendant.
Select is the right control up to a few dozen options — it has no text entry, so it cannot be typed into by mistake. Past that, scanning a list with arrow keys stops being reasonable and filtering is the only usable way in. That is the whole difference between the two.
Forms · two-way: bind:value · submits in a form with name · portalled to <body> · keyboard contract
<script lang="ts">
import { Combobox } from '@l4st/driftwood';
</script>
| Light | Dark |
|---|---|
 |
 |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
options required |
ComboboxOption[] |
— | The full list. Filtering happens here, not in your code. |
value bind: |
string |
— | The chosen option's value. |
placeholder |
string |
'Search…' |
Shown while the field is empty. |
disabled |
boolean |
false |
Blocks typing and opening. |
name |
string |
— | Submits the chosen value with the form. |
id |
string |
— | Points a <Label for=…> at the input. |
class |
string |
— | Merged with the component's own classes, last — so yours win. |
aria-label |
string |
— | Accessible name, when no visible <Label for=…> points at this. |
aria-labelledby |
string |
— | Id of the element that names this, instead of aria-label. |
emptyLabel |
string |
'No matches' |
Shown when the filter matches nothing. Localise here. |
filter |
(option: ComboboxOption, query: string) => boolean |
(option, query) => option.label.toLowerCase().includes(query.toLowerCase()) |
Match an option against what was typed. Default: case-insensitive substring. |
onValueChange |
(value: string) => void |
— | Fires when an option is chosen, not while filtering. |
Types
export type ComboboxOption = {
value: string;
label: string;
disabled?: boolean;
};
Keyboard
| Key | Does |
|---|---|
| a–z | filter the list as you type |
| ↑ / ↓ | move the active option |
| Home / End | first / last match |
| Enter | choose the active option |
| Escape | close and restore the current selection |
Example
The markup behind the screenshot above, lifted from src/routes/shots/ — so it
compiles, and it is exactly what produced the image.
<Combobox
options={[
{ value: 'volume1', label: 'volume1' },
{ value: 'volume2', label: 'volume2' },
{ value: 'backups', label: 'backups' }
]}
value="volume1"
aria-label="Volume"
/>
Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider