shadcn.io is an independent project built on shadcn/ui
Picking a row selects the repository. The external-link button at the end of the row opens it in a new tab and does not select it.
Use it when people may want to inspect an option before choosing it. A row with one job only is a plain Combobox item. In Solid, Ark UI does not open that second link.
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 repository..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search repositories..." showTrigger={false} />
<ComboboxEmpty>No repository found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(repo => <ComboboxItem class="items-start gap-2 py-3" item={repo}>
<div class="flex flex-1 flex-col gap-0.5">
<div class="font-medium">{repo.label}</div>
<div class="text-muted-foreground text-xs">
{repo.description}
</div>
</div>
<Button aria-label={`Open ${repo.label}`} data-url={repo.url} onClick={handleOpen} size="icon-xs" variant="ghost">
<ExternalLinkIcon aria-hidden="true" />
</Button>
</ComboboxItem>)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How is each row laid out?
ComboboxItem gets items-start gap-2 py-3. The name in font-medium and the description in muted text-xs fill the row, and the button sits at the end.
Why doesn't the button select the row?
Its click handler calls stopPropagation, so the click never reaches the item.
Then it opens the URL in a new tab.
Can the button be reached from the keyboard?
Not with the arrow keys, which move between rows. Enter on a row selects it. If the second action matters to keyboard users, offer it somewhere else too, such as after the pick.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
Button
Sets aria-label, Open, repo, label, data-url={repo.url} and onClick={handleOpen}. The rest is on the Button page.
