Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Labels alone omit context—descriptions add clarity. This React combobox uses two-line CommandItem layout with font-medium label and text-xs description in flex-col gap-0.5 structure. Built with shadcn/ui Command and Popover featuring py-3 taller items and items-start alignment for top-aligned Check icon. The description pattern provides decision support—perfect for integration selectors, feature toggles, plan pickers, or anywhere users need context understanding what each option does before selecting through explanatory subtext eliminating ambiguity.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Items with Metadata
Multiple text lines with avatar
Items with Icons and Descriptions
Icons plus two-line text
Items with Avatars
Avatar-enhanced items
Standard Combobox
Single-line text items
Multiple Groups with Labels
Categorized item groups
Items with Status Indicators
Badge status display
Questions you might have
React Combobox - Items with Avatars
A React combobox displaying items with Avatar components showing user profile images and fallback initials with shadcn/ui
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