Skip to content

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

Free

Favorites + All Items Combobox for Ark UI

A tool combobox with starred favorites, VS Code and Figma, above Slack, Notion, GitHub, and Linear.

VS Code and Figma sit under Favorites with a filled star. Slack, Notion, GitHub, and Linear follow under All Tools. A rule separates the two groups.

Use it where a few options get most of the picks and should stay at the top. A recent list, rather than a starred one, is the same Combobox with a clock. In React, Ark UI does not decide which rows are favorites.

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

FAQ

How are the two sections built?

Two ComboboxGroups, Favorites and All Tools, with a ComboboxSeparator between them. The heading text comes from heading on ComboboxGroup, and groupBy in useListCollection splits the items.

How is the star drawn?

A StarIcon at size-3 with fill-warning text-warning, rendered only in the Favorites rows. It has aria-hidden, since the heading already says Favorites.

Why don't favorites appear twice?

All Tools lists only the tools that aren't favorites. A tool can be in one group at a time, so it has one row and one value.

What does the button show?

Select tool... until a tool is picked, then its label, whichever group it came from.

How would people manage their favorites?

Keep the favorite list in state or user settings and build both groups from it. A star button on each row, as in Items with Action Buttons, can add and remove them.

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