Shadcn Combobox: Searchable Select for React Forms
A shadcn combobox merges a text input with a filtered dropdown list, letting users search through options instead of scrolling for them. Built from shadcn/ui parts and styled with Tailwind CSS, this react combobox component is the standard answer once a select outgrows a handful of choices.
The examples on this page are all copy-paste ready for Next.js and TypeScript projects, ranging from a basic searchable list to multi-select, grouped options, icons and descriptions, disabled items, a scrollable list for many items, loading and clear states, recent selections, and a button-triggered variant.
Why use the Shadcn Combobox?
- Search instead of scroll: Filtering as you type makes hundred-item lists usable, where a native select would force endless scrolling.
- Multi-select built in: The multi-select example handles toggling, removal, and a compact summary of chosen values, a feature native selects never had.
- Rich option rendering: Icons, descriptions, and grouped headings turn options into scannable rows, as several variants here demonstrate.
- Loading and empty states: The loading state variant covers async data honestly instead of showing a frozen empty list.
- Recent selections: Surfacing previously chosen items first, as in the recent selections example, speeds up repeat workflows in admin tools.
Production tips
- Match trigger width to the popover: The content area expanding example keeps the list aligned with the input width, which reads much cleaner in forms.
- Keep filtering forgiving: Case-insensitive substring matching is the baseline. Users typing usa should still find United States, so consider keywords per item.
- Virtualize very long lists: Past a few hundred rows, render cost matters. Cap results or virtualize, and lean on search to narrow the rest.
- Show selection state clearly: A check mark beside the active item confirms the current value every time the list opens.
- Return focus on close: After picking an option, focus should land back on the trigger so keyboard users can continue through the form.
Works well with other components
The combobox is really a composition: a popover anchors the list to the trigger, and a command list provides filtering and keyboard navigation. When options are few and search is unnecessary, a plain select is simpler, and when free text should be allowed as a value, reach for the autocomplete instead.
Wrapped in a field with a label and error message, it slots into settings forms and filter bars alike. The admin screens in our React dashboards use comboboxes heavily for entity pickers.
Under the hood
Filtering and keyboard behavior come from cmdk, the same command menu library behind the shadcn command palette, composed inside a popover as shown in the shadcn combobox docs. Scores, groups, and empty states are all cmdk features exposed through simple components.
The popover layer follows the same pattern in Radix UI and Base UI projects, so these examples fit either ecosystem without behavioral differences.
What about accessibility?
The composition follows the ARIA combobox pattern: the trigger announces the expanded state, arrow keys move a highlighted option, Enter selects, and Escape closes and restores focus. Disabled items, shown in their own example here, are skipped during keyboard navigation and announced as unavailable.
Since the code lives in your repo, you can extend announcements, for example adding a live region that reads the result count after each keystroke.