Combobox

An input that filters a list of options as the user types.

When to use

Pick one option, or several with chips, from a list long enough that users search by typing: specialties, clinics, sources.
A list loaded from the server as the user types.

When not to use

Fewer than about ten options that users scan rather than search: use Select or Radio Group.
Free text with no list behind it: use Input.
A list of actions or pages: use Command.

Install

npx shadcn@latest add @clinia/combobox

Anatomy

1Fielddata-slot="input-group"border-input · rounded-lg
2Inputdata-slot="input-group-control"text-sm · placeholder:text-muted-foreground
3Trigger[data-slot=input-group-addon] buttonghost · icon-xs

Clinia rules

The input is an Input Group, so it shares the input border and the Trust focus ring with every other field.
The highlighted option is bg-foreground/4 with text-foreground, and the selected one carries a check mark.
Always add ComboboxEmpty with a short sentence (No specialty found.), so an empty result doesn't look broken.
Chips in a multiple combobox are an input fill with text-foreground. Each has its own remove button.

Do and don't

Do use it for a list users search by typing.

Don't make users type to find one of two options: use Radio Group.

States

placeholder

open · highlighted · selected

focus

invalid

disabled

multiple · chips

Cardiology

Neurology

Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.

Accessibility

Built in

The highlighted option is tinted bg-foreground/4 with foreground text, the same as Select and Dropdown Menu.
Base UI wires the input to the list with role="combobox", aria-expanded and aria-activedescendant, so focus stays in the input while the arrow keys move through the options.

Your responsibility

Label the input: a visible Label with htmlFor, or an aria-label when the context already names it. The placeholder is not the label.
Give each chip's remove button an aria-label that names the chip, such as Remove Cardiology.

How to test

Press Tab into the input: the Trust ring appears. Type a few letters: the list opens and filters.
Press Arrow Down and Arrow Up: the highlight moves through the options while focus stays in the input.
Press Enter: the highlighted option is picked. Press Escape: the list closes.
With a screen reader, it announces the label and combobox, then each option as the highlight moves, and the empty message when nothing matches.

API

ComboboxInput

Prop	Values	Default	Description
showTrigger	`boolean`	`true`	Shows the chevron that opens the list.
showClear	`boolean`	`false`	Shows a button that clears the value.

ComboboxChip

Prop	Values	Default	Description
showRemove	`boolean`	`true`	Shows the remove button on the chip.