Skip to content

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

Free

Clear/Reset Button Combobox for Ark UI

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, Ark 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
    collection={collection}
    onInputValueChange={handleInputValueChange}
    onValueChange={handleValueChange}
    positioning={{ getAnchorElement: () => triggerRef.current }}
    selectionBehavior="clear"
    value={value}
  >
    <ComboboxTrigger
      className={cn(
        buttonVariants({ variant: "outline" }),
        "w-full justify-between pe-3"
      )}
      ref={triggerRef}
    >
      {selected ? selected.label : "Select theme..."}
    </ComboboxTrigger>
    <ComboboxContent>
      <ComboboxInput
        className="w-full"
        placeholder="Search themes..."
        showTrigger={false}
      />
      <ComboboxEmpty>No theme found.</ComboboxEmpty>
      <ComboboxList>
        {collection.items.map((theme) => (
          <ComboboxItem item={theme} key={theme.value}>
            {theme.label}
          </ComboboxItem>
        ))}
{/* 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 [].

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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

Button

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

All 42 combobox examples