Skip to content

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

Free

Multiple Groups with Labels Combobox for Ark UI

A technology combobox with Frontend and Backend labels: React, Vue, and Angular, then Node.js, Python, and Ruby.

React, Vue, and Angular sit under Frontend. Node.js, Python, and Ruby sit under Backend. Each group keeps its label while it still has matches.

Use it when options fall into a few categories and the labels help people scan. A list this short can also be a grouped Select. In React, Ark UI hides a group once a search clears it out.

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 technology..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search..."
      showTrigger={false}
    />
    <ComboboxEmpty>No technology found.</ComboboxEmpty>
    <ComboboxList>
      {groups.map(([group, items]) => (
        <ComboboxGroup heading={group} key={group}>
          {items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
{/* The rest of the file is under Installation. */}

FAQ

How are the groups built?

The items carry a group field, groupBy in useListCollection splits them, and each pair from collection.group() renders a ComboboxGroup with heading.

Which technologies are listed?

React, Vue and Angular under Frontend. Node.js, Python and Ruby under Backend.

What does the button show?

Select technology... until one is picked, then its label.

How are the labels announced?

Each group is a group in the list, named by its label, so screen readers say Frontend or Backend when the highlight moves into it.

Can I add a line between the groups?

Yes, put a ComboboxSeparator between them, as in Categories with Separators.

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