Skip to content

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

Free

Items with Metadata Combobox for Ark UI

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, Ark 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
  collection={collection}
  onInputValueChange={handleInputValueChange}
  onValueChange={handleValueChange}
  positioning={{ getAnchorElement: () => triggerRef.current }}
  selectionBehavior="clear"
  value={value}
>
  <ComboboxTrigger
    className={cn(
      buttonVariants({ variant: "outline" }),
      "w-[300px] justify-between"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select member..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search members..."
      showTrigger={false}
    />
    <ComboboxEmpty>No member found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((member) => (
        <ComboboxItem
          className="items-start gap-2 py-3"
          item={member}
          key={member.value}
        >
{/* 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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

Avatar

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

All 42 combobox examples