shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Metadata Combobox for React
A combobox of team members with an avatar, email and role on each row.
A member picker with three lines per row: the name, the email and the role, next to an avatar. The button shows only the name after a pick. Use it where people share names, or where the role or email helps pick the right person.
Preview
Installation
FAQ
How is each row laid out?
ComboboxItem gets items-start gap-2 py-3. An Avatar at the default size sits beside a column with the name in font-medium and the email and role in muted text-xs.
Who is listed?
Hayden Bleasel (Design Engineer), shadcn (Engineer), Lee Robinson (VP of Product) and Guillermo Rauch (CEO), each with a vercel.com email.
Can I search by email or role?
Not as built: the search matches names only. Add the email and role to the text the combobox searches if people look for them.
Related
- Items with Avatars ComboboxA combobox of people with an avatar on
- Items with Descriptions ComboboxA combobox of integrations with a
- Items with Icons and Descriptions ComboboxA combobox of plans, each row with an
- Avatar StandardA round avatar with a profile picture and
- Simple Single Select ComboboxA single-select combobox that opens from
- Items with Status Indicators ComboboxA combobox of tasks with a status badge