shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
Multiple Items with Badges Combobox for React
A multi-select combobox that shows each picked tag as a removable chip.
A tag picker where every pick becomes a chip in the field, with an X to remove it. You type in the same field to search, and the list stays open so several tags can be picked in a row. Use it for tags, labels, assignees or any field that holds a short list of values.
Preview
Installation
FAQ
How are the chips built?
ComboboxChips is the field. It holds a ComboboxChip per picked tag and the search input after them, so the field grows onto a new line as chips are added.
ComboboxValue hands the picked tags to a function that renders the chips and ComboboxChipsInput. The list is anchored to the field with useComboboxAnchor.
How does the X remove a tag?
Each chip has a remove button. The chip removes its own tag from the value. Backspace in an empty search removes the last chip too.
What does the field show when it's empty?
Select tags..., as the placeholder of the search input. Once a chip is there the placeholder goes away, so it doesn't sit next to the chips.
Which tags can be picked?
React, Vue, Angular, Svelte and Solid. No tag found. shows when the search matches none of them.
What if people pick a lot of tags?
The chips wrap onto more lines. For long lists, show a count instead, as in With Item Count in Trigger, or list the picks below the field as in Selected Items List Below.
Related
- Selected Items List Below ComboboxA multi-select combobox with a count on
- With Clear All Functionality ComboboxA multi-select combobox with a button
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- Clear/Reset Button ComboboxA combobox with a button that clears the
- With Select All Option ComboboxA multi-select combobox with a Select All
- With Checkboxes Visible ComboboxA multi-select combobox that marks each