Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Items with Icons and Descriptions
A React combobox combining Lucide React icons with label and description text in three-column layout featuring category-based visual indicators with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons accelerate recognition—visual symbols beat text scanning. This React combobox combines Lucide React icons (Package, Zap, Shield) with font-medium label and text-xs description using size-5 icons with text-muted-foreground. Built with shadcn/ui Command and Popover featuring items-start gap-3 layout for icon, text columns. The icon plus description pattern supports quick identification—perfect for plan selectors, feature pickers, tool choosers, or anywhere visual categorization helps combining symbolic recognition with textual explanation enabling faster browsing through dual-channel information encoding.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Items with Descriptions
Text-only two-line layout
Items with Avatars
Avatar-based visual indicators
Nested/Hierarchical Groups
ChevronRight icon indicators
Color-Coded Items
Colored dot indicators
Items with Metadata
Multi-line metadata display
Standard Combobox
Simple text-only combobox
Questions you might have
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
React Combobox - Color-Coded Items
A React combobox with color-coded items using size-3 rounded-full colored dots for visual category differentiation with Tailwind background colors and shadcn/ui