Atelier UI

Search components…

Search components…

Combobox

Searchable select with keyboard navigation and deselect support.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

ComboboxProps

Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">

PropTypeDefaultDescription
options* requiredComboboxOption[]——
valuestring | null——
defaultValuestring | nullnull—
onChange(value: string | null) => void——
placeholderstring"Select an option…"—
searchPlaceholderstring"Search…"—
emptyTextstring"No results found."—
searchablebooleantrueShow a search field above the options
deselectablebooleantrueChoosing the selected option again clears it
defaultOpenbooleanfalseOpens on first render without moving focus, handy for previews

Install

$ npx shadcn@latest add https://chromotion.dev/r/combobox.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this