shadcn.io is an independent project built on shadcn/ui
Before anything exists, the popup shows an inbox icon, No items yet, and Get started by creating your first item. Create Item adds New Item 1, New Item 2, and New Item 3.
Use it on a first-run screen, where a bare no-results line would strand people. After items exist, an empty search can use Empty. In Vue, Ark UI does not create the first items.
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-[250px] justify-between"
)'
ref="triggerRef"
>
{{ value[0] ?? "Select item..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search items..." :showTrigger="false" />
<template v-if="hasItems">
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
<ComboboxItem v-for="item in collection.items" :item="item" :key="item">
{{ item }}
</ComboboxItem>
</ComboboxList>FAQ
When does the empty block show?
While the list has no items at all. The demo keeps a flag for that and renders the block in place of the list, so it isn't confused with a search that matched nothing.
What is inside that block?
An InboxIcon at size-12, No items yet in font-medium, Get started by creating your first item in text-muted-foreground, and a small full-width Button with a PlusIcon that says Create Item.
What does Create Item add?
New Item 1, New Item 2 and New Item 3.
They replace the collection's items through set from useListCollection.
In an app, open a create form here or call your API, then add what comes back.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
