Skip to content

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

Free

Small Size Variant Combobox for Ark UI

A small status combobox with a shorter button and smaller text, for toolbars, table rows, and filters.

The button uses the small size and smaller text, and the options use that smaller text too. It is built to sit in a toolbar, a table row, or a filter bar.

Use it where a default field would crowd the row. The main choice on a page wants the large Combobox instead. In React, Ark UI does not change the pick at this size.

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({ size: "sm", variant: "outline" }),
      "w-[150px] justify-between text-xs"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select status..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search status..."
      showTrigger={false}
      size="sm"
    />
    <ComboboxEmpty>No status found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((item) => (
        <ComboboxItem className="text-xs" item={item} key={item.value}>
          {item.label}
        </ComboboxItem>
      ))}
{/* The rest of the file is under Installation. */}

FAQ

What makes this one small?

size="sm" on the outline button, with text-xs and a fixed w-[150px]. The trigger takes them through buttonVariants.

Do the rows use the same type size?

Yes. Each ComboboxItem has text-xs. The search box also takes size="sm" on ComboboxInput.

What are the statuses?

To Do, In Progress, Done and Canceled. The search box says Search status..., and No status found. shows when nothing matches.

What does the button show?

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

How wide is the list?

It opens at about the width of the button. For longer labels, widen the trigger rather than the popup, so the two stay aligned.

Is the small size fine on touch screens?

It's a smaller target, so keep it for dense desktop views. On touch-first screens use the default or the large size.

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