A multi-select combobox with user tags
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Team members as rounded pill chips with a small avatar, picked from rows that show each person's position
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
- Chips that blend into the page with the field box stripped away: use the Combobox Invisible Tags example
- 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
- Search matches each whole
membersentry as JSON, since it has no label field; returnnamefrom itemToStringLabel to match names only - Rows filter as the user types only when the function child of
ComboboxListrenders them; staticComboboxItemchildren always stay listed itemToStringValuesets only the submitted value; without itemToStringLabel, search matches an object item's label, else its value field, else its JSON- Combobox parts take
renderin both twins, since both wrap@base-ui/react;asChildapplies only to radix twin parts such asDialogTriggerandButton
https://reui.io/components/combobox/c-combobox-19.mdget_example("c-combobox-19")npx shadcn@latest add @reui/c-combobox-19About Shadcn Combobox User Tags
A multi-select combobox with user tags. Built by composing Avatar, Combobox, Field, Item. A free, open source shadcn combobox example you can install with npx shadcn@latest add @reui/c-combobox-19 and edit as your own code.
What You Can Build With Shadcn Combobox User Tags
- Composes Avatar, Combobox, Field, Item, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-combobox-19
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Combobox Examples
- Basic A basic combobox with a list of options
- Disabled A disabled combobox
- Invalid A combobox in an invalid state
- Clear Button A combobox with a clear button
- Auto-Highlight A combobox with auto-highlight enabled
- Grouped Options A combobox with grouped options
- Group Separators A combobox with grouped options and separators
- Large List A combobox with a large list of options
- Icon Addon A combobox with an icon addon
- Country Picker A combobox rendered inside a popup
- In Form A combobox used within a form
- Multi-Select A multi-select combobox
Related Shadcn Component Categories
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Open-source shadcn context menu components for right-click menus, file actions, and table row actions.
Open-source shadcn data grid components for sorting and filtering, virtualized tables, and admin dashboards.
Open-source shadcn date selector components for date range picking, booking windows, and calendar filters.
Open-source shadcn dialog components for modal forms, focused tasks, and confirmations.
Open-source shadcn drawer components for mobile panels, slide-over forms, and secondary workflows.
Frequently Asked Questions
When should I use Shadcn Combobox User Tags?
Use it for team members as rounded pill chips with a small avatar, picked from rows that show each person's position.
Shadcn Combobox as a whole fits:
- 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
For chips that blend into the page with the field box stripped away, use the Combobox Invisible Tags example. For a short fixed list chosen from a button, with no typing to narrow it, use the Select component. For a free text field that suggests matches but keeps whatever was typed, use the Autocomplete component. For a complete signup or settings page with many fields and a submit row, use the Form blocks.
How do I install Shadcn Combobox User Tags?
Is Shadcn Combobox User Tags free to use?
Which components does Shadcn Combobox User Tags use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.