shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Avatars Combobox for React
A combobox of people with an avatar on each row and on the button.
A user picker with a small avatar beside each name, repeated on the button once someone is picked. When an image can't load, the first letter of the name shows instead. Use it for assignees, reviewers, mentions and other people pickers.
Preview
Installation
FAQ
How is the avatar built?
An Avatar at size-5 with AvatarImage for the photo and AvatarFallback with the first letter of the name. The image has an empty alt, since the name is right next to it.
How does the button show the avatar?
It renders the picked person's avatar and name side by side, and Select user... before a pick.
ComboboxValue takes a function that gets the picked user.
Who is in the list?
Hayden Bleasel, shadcn, Lee Robinson and Guillermo Rauch, with their GitHub pictures.
What does the search match?
The names. The search box says Search users..., and No user found. shows when nothing matches.
What shows while an image loads?
The fallback letter, until the image has loaded. If it never loads, the letter stays.
How do I show more about each person?
Add an email or role under the name, as in Items with Metadata.
Related
- Items with Metadata ComboboxA combobox of team members with an
- 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
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend