Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Items with Avatars Combobox for React

A people combobox with an avatar on each row and on the button, falling back to the name's first letter.

Each person has a small avatar beside the name. After a pick, that avatar and name show on the button. If the image fails, the first letter of the name shows instead.

Use it for assignees, reviewers, and mentions. A name with no picture is a text Combobox row. In React, Base UI does not load the image. The avatar does.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={users}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue>{renderValue}</ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search users..." showTrigger={false} />
    <ComboboxEmpty>No user found.</ComboboxEmpty>
    <ComboboxList>
      {(user: User) => (
        <ComboboxItem className="gap-2" key={user.value} value={user}>
          <Avatar className="size-5">
            <AvatarImage alt="" src={user.avatar} />
            <AvatarFallback>{user.label.charAt(0)}</AvatarFallback>
          </Avatar>
          {user.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

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 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.

API Reference

Combobox

Sets items={users}, placeholder="Search users...", showTrigger={false} and value={user}. The rest is on the Combobox page.

Button

Sets variant="outline". The rest is on the Button page.

Avatar

Sets alt="" and src={user.avatar}. The rest is on the Avatar page.

All 42 combobox examples