Question 1

What is the Combobox?

Accepted Answer

shadcn.io's Combobox is a select you can type into: a search box filters a list of options, the arrow keys move through them and Enter picks one. It has parts for the trigger, the input, the list, items, groups, separators, an empty message and chips for multiple values. It's built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid. Each example here is one small file built from those parts.

Question 2

Are these combobox examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is a Combobox different from a Select or a Command menu?

Accepted Answer

A Select is a closed list for a handful of options people can scan. A Combobox adds a search box, which pays off from about ten options or when people know the name they want. A Command menu is a palette of actions, often opened with a shortcut, not a form field that holds a value.

Question 4

When should I search on the server instead?

Accepted Answer

When the options are too many to send to the page, or change too often. Search as the user types, after a short pause, and show what comes back, as in the async search example. A few hundred options are fine to filter in the browser.

Question 5

How do I build a multi-select combobox?

Accepted Answer

Turn on multiple selection and keep the value as an array. The multi-select examples show the picks as removable chips in the field, as a count on the button, as badges under it, with checkboxes, a Select All row or a limit on how many can be picked.

Question 6

How do I group the options?

Accepted Answer

Wrap each section's items in a ComboboxGroup with a label, and put a ComboboxSeparator between groups when they need a line. The search keeps a group's label while it has matches and hides the group when it has none. The grouped examples cover labels, counts, favorites and recent items, and groups that collapse.

Question 7

How do I show loading, empty and error states?

Accepted Answer

ComboboxEmpty shows when a search matches nothing, and any content fits inside it. For loading and errors, render a spinner, skeleton rows or a message with a Retry button in the popup in place of the list while the request runs or after it fails.

Question 8

How do I install a combobox example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Combobox and the other components it uses, such as Button, Badge or Avatar.

Question 9

How do I make the combobox fit a form?

Accepted Answer

Give the trigger or the field w-full and it stretches with the form column. The list opens at the width of the element it's anchored to, so it lines up without a width of its own.

Question 10

Does the combobox work from the keyboard?

Accepted Answer

Yes. Typing filters the list, the arrow keys move the highlight, Enter picks, and Escape closes the list. Disabled options are skipped. No extra wiring is needed.

Question 11

What do the combobox examples depend on?

Accepted Answer

The Combobox component on Base UI, Tailwind CSS, and Lucide icons. Some examples also use Button, Badge, Avatar, Kbd, Skeleton or Spinner. Nothing else: filtering, keyboard navigation and positioning come with the component.

Question 12

Are the combobox examples accessible?

Accepted Answer

Yes. The input is a combobox tied to a listbox of options, the highlighted option is announced as it moves, and selected options are marked as selected. Icon-only buttons have an aria-label, and decorative icons are hidden from screen readers.

Question 13

Can I use these examples with server-rendered pages?

Accepted Answer

Yes. The combobox runs in the browser: with React Server Components its file is a client component, and in Vue, Svelte and Solid it hydrates like any interactive component. Load the options on the server and pass them in, or fetch them in the browser as people type.

Combobox Examples

Async/Dynamic Search

Clear/Reset Button

Create New Option Inline

Keyboard Shortcuts Displayed

Recent Selections Section

With Footer Actions

With Quick Filters

Categories with Separators

Collapsible Groups

Favorites + All Items

Groups with Item Counts

Multiple Groups with Labels

More component examples

Date Picker

Radio Group

Slider

Switch

Calendar

Checkbox

Command

Context Menu

Combobox examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every combobox example. One prompt away.