Skip to content

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

Free

Items with Metadata Combobox for React

A member combobox with an avatar, a name, an email, and a role on each row, and only the name on the button.

Each row shows an avatar, the name, the email, and the role. The roles include Design Engineer and CEO. After a pick, the button shows only the name.

Use it when people share names, and the email or role is what tells them apart. A name and avatar only is a simpler Combobox row. In React, Base UI does not arrange the three lines.

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={members}>
  <ComboboxTrigger
    render={
      <Button className="w-[300px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select member..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search members..." showTrigger={false} />
    <ComboboxEmpty>No member found.</ComboboxEmpty>
    <ComboboxList>
      {(member: Member) => (
        <ComboboxItem
          className="items-start gap-2 py-3"
          key={member.value}
          value={member}
        >
          <Avatar>
            <AvatarImage alt="" src={member.avatar} />
            <AvatarFallback>{member.label.charAt(0)}</AvatarFallback>
          </Avatar>
          <div className="flex flex-col gap-0.5">
            <div className="font-medium">{member.label}</div>
            <div className="text-muted-foreground text-xs">
              {member.email}
            </div>
            <div className="text-muted-foreground text-xs">{member.role}</div>
          </div>
        </ComboboxItem>
      )}
{/* The rest of the file is under 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.

What if a picture doesn't load?

AvatarFallback shows the first letter of the name.

What does the button show?

The picked member's name, or Select member... before a pick. No member found. shows when a search matches nobody.

What about long emails?

The list is as wide as the 300px button. Add truncate to the email line if addresses run long.

API Reference

Combobox

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

Button

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

Avatar

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

All 42 combobox examples