Skip to content

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

Free

Items with Action Buttons Combobox for Ark UI

A repository combobox where each row has a second button that opens the repo without selecting it.

Picking a row selects the repository. The external-link button at the end of the row opens it in a new tab and does not select it.

Use it when people may want to inspect an option before choosing it. A row with one job only is a plain Combobox item. In React, Ark UI does not open that second link.

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-[300px] justify-between"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select repository..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search repositories..."
      showTrigger={false}
    />
    <ComboboxEmpty>No repository found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((repo) => (
        <ComboboxItem
          className="items-start gap-2 py-3"
          item={repo}
          key={repo.value}
        >
{/* The rest of the file is under Installation. */}

FAQ

How is each row laid out?

ComboboxItem gets items-start gap-2 py-3. The name in font-medium and the description in muted text-xs fill the row, and the button sits at the end.

What is the button?

A ghost icon-xs Button with an ExternalLinkIcon and an aria-label such as Open awesome-project. The URL is on its data-url attribute.

Why doesn't the button select the row?

Its click handler calls stopPropagation, so the click never reaches the item.

Then it opens the URL in a new tab.

Can the button be reached from the keyboard?

Not with the arrow keys, which move between rows. Enter on a row selects it. If the second action matters to keyboard users, offer it somewhere else too, such as after the pick.

What does the button show after a pick?

The repository name, or Select repository... before one is picked.

API Reference

Combobox

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

Button

Sets aria-label, Open, repo, label, data-url={repo.url} and onClick={handleOpen}. The rest is on the Button page.

All 42 combobox examples