Shadcn Combobox

Q: What library does ReUI Combobox use?

`@base-ui/react` Combobox: the headless multi-select primitive from the Base UI library (by the MUI team). It handles ARIA roles, keyboard navigation, and selection state without any default styles. ReUI adds Tailwind styling and chip display.

Q: Does Combobox handle hundreds of options without lag?

Yes. `@base-ui/react`'s internal filter runs on each keystroke against the options array. For 500+ options the filter completes in under 16ms in the large list component. For truly large remote datasets, switch to async search in Autocomplete with server-side filtering.

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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Form fields that pick one option by typing to search, such as a framework, timezone or country
Fields holding several picks as chips, such as frameworks or team members with avatars
Task property pickers opened from a button, such as status, priority, assignee, labels, team or due date

When not to use

A short fixed list chosen from a button, with no typing to narrow it: use the Select component
A free text field that suggests matches but keeps whatever was typed: use the Autocomplete component
A complete signup or settings page with many fields and a submit row: use the Form blocks

Agent notes

Rows filter as the user types only when the function child of ComboboxList renders them; static ComboboxItem children always stay listed
itemToStringValue sets only the submitted value; without itemToStringLabel, search matches an object item's label, else its value field, else its JSON
Combobox parts take render in both twins, since both wrap @base-ui/react; asChild applies only to radix twin parts such as DialogTrigger and Button

Third-party API docs

Base UI v1: API reference, docs, llms.txt
Sonner v2: API reference, docs, used by 2 of 28 examples
date-fns v4: docs, used by 1 of 28 examples
React DayPicker v9: API reference, docs, used by 1 of 28 examples

Markdownhttps://web.dev.reui.io/components/combobox.md

MCPget_component("combobox")

Installnpx shadcn@latest add combobox

Full index for agents:llms.txtReUI MCP setup

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.

28 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. 28 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 28 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.

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.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

What library does ReUI Combobox use?

@base-ui/react Combobox: the headless multi-select primitive from the Base UI library (by the MUI team). It handles ARIA roles, keyboard navigation, and selection state without any default styles. ReUI adds Tailwind styling and chip display.

How is Combobox different from Autocomplete?

Combobox supports multi-select with chip display, user tag creation, and dialog embedding. Autocomplete is optimized for single-value typed search in form fields. Both use @base-ui/react but different primitives with different interaction models.

Can users create new tags not in the option list?

Yes. The user tags component detects when the typed value doesn't match any existing option and presents a 'Create tag' option. Selecting it adds the new value to both the options list and the selected chips.

How does the dialog-embedded combobox work?

The combobox trigger opens a shadcn Dialog containing the full combobox with a larger option list and optional preview. Selections are staged inside the dialog and applied on confirm, avoiding partial state updates in the form.

Does Combobox handle hundreds of options without lag?

Yes. @base-ui/react's internal filter runs on each keystroke against the options array. For 500+ options the filter completes in under 16ms in the large list component. For truly large remote datasets, switch to async search in Autocomplete with server-side filtering.

Can I show avatars and metadata inside each option?

Yes. The custom item rendering component shows Avatar, name, and email inside each listbox option. Pass any React node as the option content: Base UI's active-descendant management works with any child structure.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.