shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
Create New Option Inline Combobox for React
A combobox that offers to create the typed tag when it isn't in the list.
A tag picker that grows as you use it. Type a name that isn't there and a Create row with a plus icon appears under the matches. Picking it adds the tag to the list and selects it. Use it for tags, labels and categories people make up as they go.
Preview
Installation
FAQ
When does the Create row show?
When the trimmed search isn't empty and isn't already one of the tags. The demo keeps the search text in state to work that out.
How is the Create row built?
As one more option with a special value, after a ComboboxSeparator, showing a PlusIcon and Create followed by the text in quotes. Being an option, it's reached with the arrow keys and picked with Enter.
What happens when it's picked?
The change handler sees the special value, adds the text to the tags and selects the new tag instead.
Which tags exist at first?
Tag 1, Tag 2 and Tag 3. The search box says Search or create..., and the button says Select or create tag... before a pick.
Related
- With Quick Filters ComboboxA combobox with filter buttons above the
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- With Footer Actions ComboboxA workspace combobox with a Manage
- Simple Single Select ComboboxA single-select combobox that opens from
- Async/Dynamic Search ComboboxA combobox that fetches its options as
- Standard DialogA share dialog with a read-only link, a