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 Vue, Ark UI does not open that second link.
Installation
Anatomy
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 repository..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
class="w-full"
placeholder="Search repositories..."
:showTrigger="false"
/>
<ComboboxEmpty>No repository found.</ComboboxEmpty>
<ComboboxList>
<ComboboxItem
v-for="repo in collection.items"
class="items-start gap-2 py-3"
:item="repo"
:key="repo.value"
>
<!-- The rest of the file is under Installation. -->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="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
Button
Sets aria-label="`Open ${repo.label}`", data-url="repo.url", click="handleOpen", size="icon-xs" and variant="ghost". The rest is on the Button page.
