Skip to content

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

Free

Clear/Reset Button Combobox for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not add that clear button.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<div class="relative w-[200px]">
  <Combobox
    :collection="collection"
    @input-value-change="handleInputValueChange"
    @value-change="handleValueChange"
    :positioning="{ getAnchorElement: () => triggerRef }"
    selectionBehavior="clear"
    :value="value"
  >
    <ComboboxTrigger
      :class='cn(
        buttonVariants({ variant: "outline" }),
        "w-full justify-between pe-3"
      )'
      ref="triggerRef"
    >
      {{ selected ? selected.label : "Select theme..." }}
    </ComboboxTrigger>
    <ComboboxContent>
      <ComboboxInput class="w-full" placeholder="Search themes..." :showTrigger="false" />
      <ComboboxEmpty>No theme found.</ComboboxEmpty>
      <ComboboxList>
        <ComboboxItem v-for="theme in collection.items" :item="theme" :key="theme.value">
          {{ theme.label }}
        </ComboboxItem>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
  <Button
    v-if="selected"
    aria-label="Clear theme"
<!-- 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", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.

Button

Sets v-if="selected", aria-label="Clear theme", click="handleClear", size="icon-xs" and variant="ghost". The rest is on the Button page.

All 42 combobox examples