Shadcn Combobox
Browse 28 production-ready shadcn combobox components using @base-ui/react Combobox. Covers single select, multi-select with removable chips, non-removable chips, user tag creation, dialog-embedded combobox, grouped options with separators, custom item rendering, large list performance, clear button, auto-highlight, and form integration.
A basic combobox with a list of options
A disabled combobox
A combobox in an invalid state
A combobox with a clear button
A combobox with auto-highlight enabled
A combobox with grouped options
A combobox with grouped options and separators
A combobox with a large list of options
A combobox with an icon addon
A combobox rendered inside a popup
A combobox used within a form
A multi-select combobox
A disabled multi-select combobox
A multi-select combobox in an invalid state
A multi-select with chips that cannot be removed
A combobox with custom item rendering
A combobox used within a dialog
A combobox with a custom trigger icon
A multi-select combobox with user tags
Invisible combobox with member tags
A status change combobox
A priority change combobox
A lead selection combobox
A multi-member selection combobox
A date selection combobox with an optional custom picker dialog
A multi-label selection combobox with a no-label mode
A team selection combobox
An assignee selection combobox
Shadcn Combobox: Multi-Select and Grouped Options
ReUI Combobox is built on @base-ui/react Combobox: the headless multi-select primitive that handles listbox state, keyboard navigation, selection model, and WAI-ARIA combobox roles. It supports single and multi-select modes, chip display for selected values, and inline filtering.
Twenty components cover basic single-select, popup-rendered combobox, form integration, multi-select with removable chips, non-removable chips, invalid state, user tag creation, custom item rendering, dialog-embedded combobox, custom trigger icon, large list performance, grouped options with separators, icon addons, and disabled states.
The sections below cover the Base UI foundation, real use cases, feature details, and how Combobox composes with Dialog, Field, and Input Group.
What is Shadcn Combobox?
ReUI Combobox is a custom shadcn component built on @base-ui/react's Combobox primitive. It is distinct from the shadcn Autocomplete (optimized for single-value typed search) and from the Command palette (full keyboard-driven command interface). Combobox handles multi-select with chip display, user-defined tag creation, and grouped option lists: use cases that need a richer selection model than a basic autocomplete.
The component renders selected values as removable chips inside the input field, supports an invisible trigger mode for inline tag inputs, and embeds inside Dialog for modal selection flows. Twenty components show all major variants inside realistic form and dashboard layouts.
Why Use Shadcn Combobox?
Multi-select is one of the most requested form controls in SaaS products: skill tags, team member assignment, category classification, permission role selection, and label management all need a searchable multi-select with chip display. @base-ui/react provides the headless foundation with full ARIA compliance; ReUI adds the Tailwind styling, chip removal, and the 20 production components developers actually need.
The large list performance component handles hundreds of options without virtualization: Base UI's internal filtering keeps renders minimal. For truly enormous lists, pair with Shadcn Autocomplete in async search mode. For full command palettes, use Shadcn Command.
Libraries and ReUI Combobox Primitives
ReUI Combobox imports @base-ui/react for the headless Combobox primitive and Sonner for async operation feedback. It composes shadcn Input Group, Button, Dialog, Field, Avatar, and Item for chip display and layout.
The invisible combobox variant uses a transparent trigger for inline tag inputs in chat, task, and assignment interfaces where the control should blend into the surrounding text layout.
Shadcn Combobox Features
- Base UI Combobox Primitive. Powered by @base-ui/react Combobox. Full WAI-ARIA multi-select combobox with listbox, option, and group roles, active-descendant management, and keyboard navigation.
- Multi-Select with Removable Chips. Selected values display as removable chip badges inside the input. Backspace removes the last chip; click × removes individual selections. The chip list scrolls horizontally in constrained containers.
- Non-Removable and Locked Chips. Chips can be rendered without a remove button for locked selections: useful for required team members, non-removable system tags, or read-only assigned categories.
- User Tag Creation. The user tags component allows creating new option values that are not in the predefined list: type a new tag and press Enter to add it. Useful for custom label, skill, and keyword fields.
- Dialog-Embedded Combobox. A combobox inside a shadcn Dialog for selection flows that need more space: long option lists, preview panels, or confirmation before applying selections.
- Grouped Options with Separators. Options group into labeled sections with optional Separator primitives between groups. Useful for categorized lists like country codes, department members, or mixed content types.
- Custom Item Rendering. Each option renders a custom React node: Avatar, Badge, description text, metadata. The custom rendering component shows user avatars with name and email inside each listbox option.
- Large List Performance. Base UI's internal filtering handles hundreds of options without full re-renders. The large list component shows 500+ options with no perceptible lag on filter input.
- Auto-Highlight and Clear Button. Auto-highlight immediately selects the first matching option as the user types. The clear button removes all selections with one click: both optional props on the same Combobox instance.
Integrating With Other Components
Wrap Combobox in Shadcn Field with Shadcn Label for accessible labeling and error display. Use Shadcn Input Group when an icon or action button sits alongside the combobox trigger.
For single-value typed search in a form field use Shadcn Autocomplete. For full command palettes with sections, actions, and shortcuts use Shadcn Command. For a lightweight single-select without search use Shadcn Select.
Embed Combobox inside Shadcn Dialog for modal selection flows, or inside Shadcn Popover for inline panel selection. Use Shadcn Sonner for async feedback when selections trigger server mutations.