Skip to content

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

Free

Small Size Variant Combobox for React

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, Base 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 items={statuses}>
  <ComboboxTrigger
    render={
      <Button
        className="w-[150px] justify-between text-xs"
        size="sm"
        variant="outline"
      />
    }
  >
    <ComboboxValue placeholder="Select status..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search status..." showTrigger={false} />
    <ComboboxEmpty>No status found.</ComboboxEmpty>
    <ComboboxList>
      {(item: Status) => (
        <ComboboxItem className="text-xs" key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

What makes this one small?

size="sm" on the outline button, with text-xs and a fixed w-[150px]. They're props of the Button the trigger renders.

Do the rows use the same type size?

Yes. Each ComboboxItem has text-xs.

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 items={statuses}, placeholder="Select status...", placeholder="Search status...", showTrigger={false} and value={item}. The rest is on the Combobox page.

Button

Sets size="sm" and variant="outline". The rest is on the Button page.

All 42 combobox examples