Combobox
A searchable dropdown that lets users type to filter through a list of options and select a single value. Ideal when the option set is large enough that scrolling alone would be impractical.
1<Combobox label="Fruit" options={fruits} placeholder="Search…" />
2
Usage
1import { Combobox } from "atlas";
2
3<Combobox
4 label="Fruit"
5 options={options}
6 value={value}
7 onChange={setValue}
8 placeholder="Search…"
9/>
10
Examples
Default
The default
Combobox renders a searchable dropdown with a label and a list of options.1<Combobox label="Fruit" options={fruits} placeholder="Search…" />
2
Disabled
Set
disabled to prevent the user from interacting with the combobox. The control’s opacity is reduced to signal that it is inactive.1<Combobox label="Fruit" options={fruits} disabled />
2
API Reference
| Prop | Type | Default |
|---|---|---|
| options | ComboboxOption[] | - |
| value | string | - |
| onChange | (value: string) => void | - |
| placeholder | string | - |
| label | string | - |
| disabled | boolean | false |
- Text Input for plain text entry without a dropdown
- Select for choosing from a short list using the native dropdown
- Popover Select for a searchable select with icons and a custom popover