Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty State with Action Combobox for Ark UI

A combobox that opens on an empty state, with a Create Item button that adds the first three items.

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 React, Ark UI does not create the first items.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox
  collection={collection}
  onInputValueChange={handleInputValueChange}
  onValueChange={handleValueChange}
  positioning={{ getAnchorElement: () => triggerRef.current }}
  selectionBehavior="clear"
  value={value}
>
  <ComboboxTrigger
    className={cn(
      buttonVariants({ variant: "outline" }),
      "w-[250px] justify-between"
    )}
    ref={triggerRef}
  >
    {value[0] ?? "Select item..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search items..."
      showTrigger={false}
    />
    {hasItems ? (
      <>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item}>
              {item}
            </ComboboxItem>
{/* The rest of the file is under Installation. */}

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.

What happens after the items exist?

The list takes the block's place. Search filters it, a pick shows on the button, and No results found. covers a search that matches nothing.

Does pressing the button close the list?

No. It's inside ComboboxContent, so pressing it counts as a click inside the popup. The list stays open and shows the new items.

API Reference

Combobox

Sets collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

Button

Sets onClick={handleCreate} and size="sm". The rest is on the Button page.

All 42 combobox examples