shadcn.io is an independent project built on shadcn/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 Solid, Ark UI does not arrange the three lines.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={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>
{_listCollection.collection().items.map(member => <ComboboxItem class="items-start gap-2 py-3" item={member}>
<Avatar>
<AvatarImage alt="" src={member.avatar} />
<AvatarFallback>{member.label.charAt(0)}</AvatarFallback>
</Avatar>
<div class="flex flex-col gap-0.5">
<div class="font-medium">{member.label}</div>
<div class="text-muted-foreground text-xs">
{member.email}
</div>
<div class="text-muted-foreground text-xs">
{member.role}
</div>
</div>
</ComboboxItem>)}
</ComboboxList>
</ComboboxContent>
</Combobox>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.
Can I search by email or role?
Not as built: the search matches names only. Add the email and role to the text the combobox searches if people look for them.
API Reference
Combobox
Sets collection={_listCollection.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.
