Combobox

A searchable control for filtering and choosing options.

Overview

Combobox combines Popover and Command so users can type to filter while the list is open. Use Select for conventional dropdowns; reach for Combobox when search is the primary interaction.

Preview

Customize

Align

Placeholder

Search Placeholder

Empty Message

Preselected

Disable Astro

Disabled

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add combobox

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxTrigger,
} from "@/components/ui/combobox";

export function FrameworkField() {
  return (
    <Combobox>
      <ComboboxTrigger aria-label="Framework" placeholder="Select framework" />
      <ComboboxContent searchPlaceholder="Search frameworks…">
        <ComboboxItem value="next">Next.js</ComboboxItem>
        <ComboboxItem value="react">React</ComboboxItem>
      </ComboboxContent>
    </Combobox>
  );
}

Examples

Basic

Composable trigger and list with a default selection.

Search

Typing filters options while the popover is open.

Disabled options

Individual items can be unavailable without disabling the field.

Empty results / dashboard filter

Compact assignee control for boards. Customize emptyMessage when search finds no matches.

Open tasks

Filtered by assignee

ada

In practice

Filter a task board by assignee or search a long framework list without leaving the page.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`value / defaultValue`	string	—	Selected option value for controlled or uncontrolled use.
`onValueChange`	(value: string \| undefined) => void	—	Called when the user selects an option. Selecting again clears the value.
`open / defaultOpen / onOpenChange`	boolean	—	Control the popover open state.
`disabled`	boolean	—	Disables the Combobox trigger.
`ComboboxTrigger placeholder`	string	—	Shown when no value is selected.
`ComboboxContent searchPlaceholder / emptyMessage`	string	—	Copy for the filter field and the no-results row.
`ComboboxItem keywords`	string[]	—	Extra terms included when filtering options.
`ComboboxItem disabled`	boolean	—	Prevents selecting that option.

Accessibility

The trigger exposes role="combobox" with aria-expanded and aria-haspopup="listbox". Options render as list items with aria-selected when active.

The search field receives focus when the popover opens. Arrow keys move between options; Enter selects. Escape closes the popover and returns focus to the trigger.