Combobox

Finds one thing in a known set as you type, from a list that opens under the field.

Configurations

Supported configurations for this component.

LiveEmptyWith query

Configurations

3 examples
Live
sm
md
Empty
sm
md
With query
sm
md

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

ComboboxOption

PropTypeDefaultDescription
idreqstring-Stable key; also what the caller matches on in `onSelect`.
labelreqstring-The row's title, and what the default filter searches.
iconReact.ComponentType-Phosphor icon shown as the row's plain leading glyph, sized by the row's rung.
metaReact.ReactNode-Trailing metadata, read not clicked (a value, a date): 10px on text.muted.
keywordsstring[]-Extra words the default filter matches besides the label.

Combobox

PropTypeDefaultDescription
optionsreqComboboxOption[]-Everything the field can find. The list shows the ones `filter` keeps for the typed query.
onSelectreq(option: ComboboxOption) => void-Called with the picked option, by Enter on the cursor row or a click.
valuestring-Controlled query (the typed text). Pair with `onValueChange`.
defaultValuestring''Initial query of an uncontrolled field.
defaultOpenbooleanfalseShow the results list at mount, without taking focus, when the field starts with a query. From then on it closes and opens as usual. For a page that documents the list.
onValueChange(query: string) => void-Called on every keystroke, and with '' when a pick clears the field.
filter(option: ComboboxOption, query: string) => boolean-Which options match the trimmed query. Defaults to a case-insensitive "includes" over the label and the keywords.
size'sm'|'md''md'Rung of the field (28 or 32px tall), and of the result rows unless `listSize` says otherwise.
listSize'sm'|'md'-Rung of the result rows: 12px title and 16px glyph, or 14px and 18px. Defaults to `size`. A compact field in a top bar keeps md rows, so the results stay readable under a small field.
placeholderstring'Search anything'Text shown in the empty field.
ariaLabelstring-Accessible name of the input. Defaults to the placeholder.
shortcutstring|null'⌘ K'The field's keycap. Pass null to hide it. The caller binds the key itself, to the forwarded ref.
emptyText(query: string) => React.ReactNode-The line shown when nothing matches, given the trimmed query. Defaults to Nothing matches “query”.
clearOnSelectbooleantrueEmpty the field after a pick. Set false to leave the query in place.
widthstring|number'100%'Width of the field, any CSS length. The list matches it.
classNamestring-Class on the outer wrapper.
styleReact.CSSProperties-Inline styles merged onto the outer wrapper.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states