Filterable text field with an option list, optional async loading, and custom values.
Also known as: autocomplete, typeahead, filter select
Install with the CLI, or copy the component source into your project.
Add combobox (npm)
1npx --yes -p @default-file/ui df-ui add combobox
Filterable field with static options. The list opens on focus.
Type in the field to filter by label or value. Disabled options stay in the list but cannot be chosen.
loadOptions fetches rows for the current query. Toggle loading to see the catalogue loading copy, then the resolved list. debounceMs is 0 in this preview.
allowCustomValue commits text that is not in the list. Type a name and press Enter.
Custom empty copy when the option list has no rows.
Visible Label wired with htmlFor, id, and aria-labelledby so the combobox input is named.
Disabled field with a committed value. Invalid chrome on an empty field.
Filterable text field backed by Option List. Supports static options, async loading, clear, and optional custom values.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Controlled committed option value. The input shows the matching label; typing uses a separate query string. |
| defaultValue | string | - | Uncontrolled initial option value. |
| onValueChange | (value: string) => void | - | Called with the option value when a selection is committed, or with custom text when allowCustomValue is set. |
| options | readonly ComboboxOption[] | - | Static options to filter. |
| loadOptions | (query: string) => Promise<ComboboxOption[]> | - | Async option loader for the current query. |
| allowCustomValue | boolean | - | Allow committing text that is not in the option list. |
| clearable | boolean | true | Show a clear control when the field has text. |
| placeholder | string | - | Input placeholder. |
| disabled | boolean | - | Disable the field. |
| invalid | boolean | - | Mark the field invalid for styling and aria-invalid. |
| open | boolean | - | Controlled list open state. |
| defaultOpen | boolean | - | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Called when the list open state changes. |
| debounceMs | number | - | Debounce for async loadOptions. |
| id | string | - | Id on the text input. |
| emptyContent | ReactNode | - | Content when the filtered list is empty. |
| itemChrome | ListItemChromeProps | - | Default List Item chrome for every option row. |
| aria-label | string | - | Accessible name when no aria-labelledby is set. |
| aria-labelledby | string | - | Id of an external label. When set, aria-label is omitted so the external name wins. |
| className | string | - | Additional styles on the root. |