Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Items with Status Indicators
A React combobox with Badge components displaying status indicators using variant mapping for visual task state differentiation with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Status needs visibility—badges show state at a glance. This React combobox adds Badge component from shadcn/ui with statusConfig mapping status values to label text and badge variants (default, secondary, outline). Built with shadcn/ui Command and Popover featuring justify-between layout placing status badges on the right side. The status badge pattern enables quick filtering—perfect for task pickers, issue selectors, order status dropdowns, or anywhere item state matters allowing users to see status while selecting through color-coded visual indicators distinguishing states instantly.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Items with Descriptions
Two-line descriptive text
Color-Coded Items
Colored dot indicators
Standard Badge
Basic badge component
Items with Metadata
Multiple metadata fields
Groups with Item Counts
Count badges in headings
Standard Combobox
Simple text-only combobox
Questions you might have
React Combobox - Items with Descriptions
A React combobox with two-line items displaying label with font-medium and description with text-xs text-muted-foreground styling with shadcn/ui
React Combobox - Items with Metadata
A React combobox combining Avatar with multiple metadata lines displaying name, email, and role in three-line item layout with shadcn/ui