Combobox
A field you type into to find and pick one option from a long list.
import { Combobox } from "@flinbu/seed";Search tokens
Matches names and keywords; disabled options are shown but skipped.
Type to search by name or use.
import { Combobox, Field } from "@flinbu/seed";
import { Type } from "lucide-react";
const [v, setV] = React.useState<string | null>("bg-primary");
<div className="w-full max-w-xs">
<Field label="Token" hint="Type to search by name or use.">
<Combobox options={OPTIONS} value={v} onValueChange={setV} placeholder="Search tokens" clearable />
</Field>
</div>Use it for
- Long lists people search: tokens, components, people, countries.
Use something else for
- Short lists people recognize: use Select.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | ComboboxOption[] | – | { value, label, description?, icon?, keywords?, disabled? }. |
value / defaultValue | stringnull | – | Selected value. |
onValueChange | (value: stringnull) => void | – | Called on pick and clear. |
clearable | boolean | – | A clear button once something is picked. |
filter | (option, query) => boolean | – | Your own matching. |
emptyText | ReactNode | 'No matches' | Shown when nothing matches. |
size | 'sm''md''lg' | 'md' | Same heights as Input. |
Accessibility
- The ARIA combobox pattern: arrow keys move the active option, Enter picks, Escape closes, focus stays in the field.
- Inside Field it gets its label, hint and error.