Shadcn.io is not affiliated with official shadcn/ui
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
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.
Items with Descriptions preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Items with Avatars
A React combobox displaying items with Avatar components showing user profile images and fallback initials with shadcn/ui
Items with Status Indicators
A React combobox with Badge components displaying status indicators using variant mapping for visual task state differentiation with shadcn/ui