Skip to content

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

Free

Categories with Separators Combobox for Ark UI

A page combobox split into three unlabeled sections by separators: home, settings, and help.

Home and Dashboard, then Settings and Profile, then Help and Logout. The sections have no headings. Thin rules are the only split, and a search that misses says No page found.

Use it for a short list with an obvious break, such as navigation. Named groups need a heading, which a Select group can carry too. In React, Ark UI draws the rules. It does not name the sections.

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-[200px] justify-between"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select page..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search..."
      showTrigger={false}
    />
    <ComboboxEmpty>No page found.</ComboboxEmpty>
    <ComboboxList>
      {groups.map(([group, items], index) => (
        <Fragment key={group}>
          <ComboboxGroup aria-label={group}>
            {items.map((item) => (
              <ComboboxItem item={item} key={item.value}>
                {item.label}
{/* The rest of the file is under Installation. */}

FAQ

How are the sections built?

Each section is a ComboboxGroup and a ComboboxSeparator sits between two groups. The items carry a group field and groupBy in useListCollection splits them, so collection.group() returns the sections in order.

Why don't the groups show a heading?

The original layout has none, so the groups only get an aria-label (Primary, Secondary, Other) that screen readers announce. Add a group label when the sections need a name on screen, as in Multiple Groups with Labels.

What can I pick?

Home, Dashboard, Settings, Profile, Help and Logout. The search box says Search..., and No page found. shows when nothing matches.

What does the button show?

Select page... until a page is picked, then its label.

Do the arrow keys cross the separators?

Yes. They move through every item in order and skip the separators, which can't be focused.

API Reference

Combobox

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

All 42 combobox examples