shadcn.io is an independent project built on shadcn/ui
Every row has two lines. GitHub, Slack, and Notion are the names, and a smaller muted line says what each one does. The button shows only the name after a pick.
Use it when the names alone are not enough to choose. A single line per option is a plain Select. In Solid, Ark UI does not write the second line.
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-[280px] justify-between")} ref={triggerRef}>
{selected() ? selected()!.label : "Select integration..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search integrations..." showTrigger={false} />
<ComboboxEmpty>No integration found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(item => <ComboboxItem class="py-3" item={item}>
<div class="flex flex-col gap-0.5">
<div class="font-medium">{item.label}</div>
<div class="text-muted-foreground text-xs">
{item.description}
</div>
</div>
</ComboboxItem>)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How are the two lines laid out?
A flex flex-col gap-0.5 block inside ComboboxItem: the name in font-medium, the description in text-muted-foreground text-xs. The item gets py-3 for room.
Which integrations are listed?
GitHub (Connect your GitHub repositories), Slack (Send notifications to Slack channels) and Notion (Sync data with Notion databases).
Does the search look at the descriptions?
No, only the names. Typing notifications finds nothing.
Pass itemToString to useListCollection to search both.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
