Search

Search components and blocks

Sign in

Combobox

A searchable select for lists too long to scan by eye — timezones, countries, models — built on the same morphing popover shell as Popover, with the selected row checked automatically.

pnpm dlx shadcn@latest add @ditherui/combobox

Install

$ pnpm dlx shadcn@latest add @ditherui/combobox

Props

options{ value: string; label: string }[]—
valuestring—
defaultValuestring—
onValueChange(value: string) => void—
placeholderstring"Select..."
searchPlaceholderstring"Search..."
emptyTextstring"No results found."
openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—

When to use the combobox

Use a combobox for lists too long to scan, such as timezones, countries or models. It is a searchable select built on the morphing popover shell.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components