Skip to content

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

Free

Clear/Reset Button Combobox for React

A theme combobox that starts on System and shows an X beside the chevron until the theme is cleared.

Light, Dark, and System are the choices, and System starts selected. While a theme is set, an X beside the chevron clears it and the button returns to Select theme...

Use it for an optional field, where empty is a valid answer. A value people must keep should drop the X and stay a plain Select. In React, Base UI does not add that clear 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-[200px]">
  <Combobox items={themes} onValueChange={setValue} value={value}>
    <ComboboxTrigger
      render={
        <Button className="w-full justify-between pe-3" variant="outline" />
      }
    >
      <ComboboxValue placeholder="Select theme..." />
    </ComboboxTrigger>
    <ComboboxContent>
      <ComboboxInput placeholder="Search themes..." showTrigger={false} />
      <ComboboxEmpty>No theme found.</ComboboxEmpty>
      <ComboboxList>
        {(theme: Theme) => (
          <ComboboxItem key={theme.value} value={theme}>
            {theme.label}
          </ComboboxItem>
        )}
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
  {value ? (
    <Button
      aria-label="Clear theme"
      className="absolute end-8 top-1/2 -translate-y-1/2"
      onClick={handleClear}
      size="icon-xs"
      variant="ghost"
    >
      <XIcon aria-hidden="true" />
    </Button>
{/* The rest of the file is under Installation. */}

FAQ

Where is the clear button?

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

What does it do?

It empties the value the demo keeps in state, and the combobox shows its placeholder. The value becomes null.

When is it shown?

Only while a theme is selected. With nothing to clear it isn't rendered.

How is the button labelled?

It's a ghost icon-xs Button with an XIcon and aria-label Clear theme, since the icon has no text.

Which themes are listed?

Light, Dark and System. The search box says Search themes..., and No theme found. shows when nothing matches.

Should clearing go back to a default instead?

If the field always needs a value, set it back to the default, such as System, rather than to empty, and label the button Reset.

API Reference

Combobox

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

Button

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

All 42 combobox examples