Combobox

Forms · src/components/Combobox/Combobox.tsx

Pick one value from a list long enough that you would rather type than scroll.

For a short list use Select; for a handful use Radio. The typed text is held separately from the chosen value, so closing without choosing restores what was selected rather than leaving a half-typed string standing in for a value that was never picked.

filter={false} matters for a server-backed search: filtering again on the client would hide results the server deliberately returned for a fuzzy or aliased match.

Import

import { Combobox } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
options	Array<ComboboxOption | string>
value	string
defaultValue	string
placeholder	string
size	'sm' | 'md' | 'lg'
disabled	boolean
defaultOpen	boolean
filter	boolean	false when the options already came back filtered - a server search. Stops double filtering.
emptyText	React.ReactNode	What to say when nothing matches.
onChange	(value: string, option: ComboboxOption) => void

Also accepts everything on FieldShellProps.

Exported types

ComboboxOption