Skip to content

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

Free

With Clear All Functionality Combobox for React

A multi-select color combobox that starts with Red and Blue, and an X that clears every pick at once.

Red and Blue start selected, and the button reads 2 color(s) selected. An X next to the chevron clears every color at once, instead of unpicking them one by one.

Use it for filters and other multi-selects people often reset. Removing one chip at a time fits a Combobox with chips. In React, Base UI does not add the clear-all button.

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

<div className="relative w-[250px]">
  <Combobox items={colors} multiple onValueChange={setValue} value={value}>
    <ComboboxTrigger
      render={
        <Button className="w-full justify-between pe-3" variant="outline" />
      }
    >
      {value.length > 0
        ? `${value.length} color(s) selected`
        : "Select colors..."}
    </ComboboxTrigger>
    <ComboboxContent>
      <ComboboxInput placeholder="Search colors..." showTrigger={false} />
      <ComboboxEmpty>No color found.</ComboboxEmpty>
      <ComboboxList>
        {(color: Color) => (
          <ComboboxItem key={color.value} value={color}>
            {color.label}
          </ComboboxItem>
        )}
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
  {value.length > 0 ? (
    <Button
      aria-label="Clear colors"
      className="absolute end-8 top-1/2 -translate-y-1/2"
      onClick={handleClear}
      pill
      size="icon-xs"
      variant="ghost"
{/* The rest of the file is under Installation. */}

FAQ

Where does the clear button sit?

In a relative wrapper around the combobox, positioned absolute end-8 so it lands just before the chevron. It's a sibling of the trigger, not inside it, since a button can't contain another button.

What does it clear?

The whole selection: the demo sets the value to an empty array, and the button goes back to Select colors....

When is it shown?

Only while at least one color is picked. With nothing to clear it's not rendered.

How is the button styled?

A ghost, pill, icon-xs Button with an XIcon. It has aria-label Clear colors, since the icon has no text.

What does the combobox button show?

2 color(s) selected and so on, or Select colors... when nothing is picked.

Which colors are listed?

Red, Blue, Green, Yellow and Purple. The search box says Search colors..., and No color found. shows when nothing matches.

API Reference

Combobox

Sets items={colors}, multiple, onValueChange={setValue}, value={value}, placeholder="Search colors..." and showTrigger={false}. The rest is on the Combobox page.

Button

Sets variant="outline", aria-label="Clear colors", onClick={handleClear}, pill, size="icon-xs" and variant="ghost". The rest is on the Button page.

All 42 combobox examples