Skip to content

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

Free

Items with Metadata Combobox for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not arrange the three lines.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Combobox
  :collection="collection"
  @input-value-change="handleInputValueChange"
  @value-change="handleValueChange"
  :positioning="{ getAnchorElement: () => triggerRef }"
  selectionBehavior="clear"
  :value="value"
>
  <ComboboxTrigger
    :class='cn(
      buttonVariants({ variant: "outline" }),
      "w-[300px] justify-between"
    )'
    ref="triggerRef"
  >
    {{ selected ? selected.label : "Select member..." }}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput class="w-full" placeholder="Search members..." :showTrigger="false" />
    <ComboboxEmpty>No member found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem
        v-for="member in collection.items"
        class="items-start gap-2 py-3"
        :item="member"
        :key="member.value"
      >
        <Avatar>
          <AvatarImage alt="" :src="member.avatar" />
          <AvatarFallback>{{ member.label.charAt(0) }}</AvatarFallback>
        </Avatar>
<!-- 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", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. 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