shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Status Indicators Combobox for React
A combobox of tasks with a status badge at the end of each row.
A task picker where each row ends with its status: Done, In Progress or To Do. The badge variants make the states easy to tell apart while scanning. Use it for tasks, tickets or orders, where the state matters when picking one.
Preview
Installation
FAQ
How is a status turned into a badge?
A statusConfig map gives each status a label and a Badge variant: completed is Done with default, in-progress is In Progress with secondary, and todo is To Do with outline.
How is the badge placed?
ComboboxItem gets justify-between gap-2, so the task name sits at the start and the badge at the end, before the check.
Which tasks are listed?
Update documentation (Done), Fix login bug (In Progress), Add dark mode (To Do) and Optimize performance (In Progress).
Can I search by status?
No, the search matches task names. Typing done finds nothing. Add the status label to the searched text if people filter that way.
What does the button show?
The picked task's name, or Select task... before a pick. No task found. shows when nothing matches.
Can I stop finished tasks from being picked?
Yes, disable them, as in With Disabled Items. The badge still shows why.
Related
- Items with Descriptions ComboboxA combobox of integrations with a
- Color-Coded Items ComboboxA combobox with a colored dot beside each
- Badge with Text (Standard)A default badge with a short label for a
- Items with Metadata ComboboxA combobox of team members with an
- Groups with Item Counts ComboboxA combobox whose group headings show how
- Simple Single Select ComboboxA single-select combobox that opens from