Q: How do I display loading, empty, and error states inside the combobox?

Use the with-states variant. cmdk emits ` ` when no items match the search — render "No results found" inside it. For loading state (async fetch in flight), render a ` ` row with a spinner. For errors, render a non-selectable item with destructive styling and a "Try again" affordance. Avoid hiding the popover on error — users need to see what went wrong.

Question 1

What is a shadcn combobox?

Accepted Answer

A shadcn combobox is a searchable select — an Input you type into that filters a list of options, with keyboard arrow navigation and Enter to select. It composes Popover (the floating panel) with Command (the cmdk fuzzy search engine) plus your own item rendering. Use it when a regular Select would be unwieldy: 20+ options, options users would search by name (countries, frameworks, users), or any case where typing is faster than scrolling.

Question 2

Are these combobox examples free?

Accepted Answer

Yes, every combobox example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating. Browse, copy, and ship.

Question 3

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

Accepted Answer

Select is a closed dropdown list — fine for 5-15 options users can scan visually. Combobox adds a search input on top of Select — great for 20-500 options. Command is a full keyboard-driven palette (often with Cmd+K trigger) for app-wide actions, not for picking one value to fill a form field. Combobox lives inside a form. Command is the chrome of the app.

Question 4

When should I use a combobox versus async server-side search?

Accepted Answer

Combobox loads all options client-side and filters in memory — works great up to ~1000 options. Beyond that, payload + filter performance degrade and you should switch to a server-side search pattern: type → debounce → fetch matches → render results. shadcn doesn't ship a built-in async combobox, but you can wire `useDeferredValue` + a fetch hook to the Command's input and feed the results into CommandItem children.

Question 5

How do I build a multi-select combobox?

Accepted Answer

Use the multi-select variant. Track an array (or Set) of selected values in state. Render a check icon next to selected CommandItems via `data-[selected=true]:opacity-100`. The trigger button should display the selected items as Badges that users can click to deselect — a common pattern for tag pickers, member assignees, and filter rows. Cap visible badges with a `+N more` overflow indicator when the count exceeds 3-4.

Question 6

How do I show options grouped by category?

Accepted Answer

Use the grouped variant — wrap each section's items in a `<CommandGroup heading="Section Title">`. cmdk filters across all groups but preserves the heading rows for the matching items. For 50+ options, grouping cuts cognitive load dramatically. Common groupings: Recent / All, Owned / Shared, Free / Pro, by team or workspace.

Question 7

How do I display loading, empty, and error states inside the combobox?

Accepted Answer

Use the with-states variant. cmdk emits `` when no items match the search — render "No results found" inside it. For loading state (async fetch in flight), render a `` row with a spinner. For errors, render a non-selectable item with destructive styling and a "Try again" affordance. Avoid hiding the popover on error — users need to see what went wrong.

Question 8

How do I install a combobox example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/combobox/…`, plus the shadcn/ui Combobox / Command / Popover primitives (and cmdk + Radix Popover) if you don't already have them.

Question 9

How do I make the combobox the right width inside a form?

Accepted Answer

Apply `w-full` to the trigger button so it stretches to match the form column. The Popover's `align="start"` aligns the dropdown with the trigger's left edge. For the dropdown to match the trigger width, set `style={{ width: 'var(--radix-popover-trigger-width)' }}` on PopoverContent — Radix exposes the trigger's width as a CSS variable for exactly this case.

Question 10

How do I support keyboard typeahead in the combobox?

Accepted Answer

cmdk handles typeahead automatically — typing in the Input filters the visible items in real time, ArrowUp/ArrowDown moves the focus through the filtered list, Enter selects, Esc closes. No extra wiring needed. For custom keyboard shortcuts (Cmd+K to open the combobox from anywhere), wire a global keydown listener that toggles the Popover's open state.

Question 11

Which libraries do combobox examples depend on?

Accepted Answer

cmdk (the fuzzy-search engine), Radix UI Popover (the floating panel), shadcn/ui Combobox + Command + Popover wrappers (generated into your project by the CLI), Tailwind CSS, and Lucide React (chevrons, check, x icons). Optional: Badge primitive for the multi-select selected-items display. React 19 baseline.

Question 12

Are combobox examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The trigger is `role="combobox"` with `aria-expanded` and `aria-controls`. The dropdown uses `role="listbox"` with `role="option"` items. cmdk announces the active option as users arrow-navigate. Esc closes the dropdown and returns focus to the trigger. The `<CommandEmpty>` row gets `aria-live="polite"` so SR users hear when filtering yields no results.

Question 13

Can I use these combobox examples with React Server Components?

Accepted Answer

The Combobox is a client component (it manages open state, search query, and selection). Wrap it inside a Server Component parent and pass the options array as a prop — fetch on the server, render the static option list inside the client-boundary combobox. For server-side async search (large datasets), the input + popover stay client-side but the filter logic moves to a Server Action.

React Combobox Examples for shadcn/ui

Browse every combobox example

Frequently Asked Questions