Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Context builds trust—metadata informs decisions. This React combobox combines size-8 Avatar with three text lines (name with font-medium, email and role with text-xs text-muted-foreground) in flex-col layout. Built with shadcn/ui Command and Popover featuring py-3 tall items and items-start alignment for rich member information. The metadata pattern supports informed selection—perfect for team member pickers, contact selectors, author assignments, or anywhere user details matter enabling confident choices through comprehensive profile information distinguishing between similar names.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Items with Avatars
Simple avatar display
Items with Descriptions
Two-line text layout
Items with Icons and Descriptions
Icon plus text combination
Standard Avatar
Basic avatar component
Standard Combobox
Simple text-only combobox
Items with Status Indicators
Badge status display
Questions you might have
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
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