Skip to content

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

Free

With Clear All Functionality Combobox for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not add the clear-all 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-[250px]">
    <Combobox
      :collection="collection"
      :multiple="true"
      @input-value-change="handleInputValueChange"
      @value-change="handleValueChange"
      :positioning="{ getAnchorElement: () => triggerRef }"
      :value="value"
    >
      <ComboboxTrigger
        :class='cn(
          buttonVariants({ variant: "outline" }),
          "w-full justify-between pe-3"
        )'
        ref="triggerRef"
      >
        {{ value.length > 0
? `${value.length} color(s) selected`
: "Select colors..." }}
      </ComboboxTrigger>
      <ComboboxContent>
        <ComboboxInput class="w-full" placeholder="Search colors..." :showTrigger="false" />
        <ComboboxEmpty>No color found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="color in collection.items" :item="color" :key="color.value">
            {{ color.label }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
    <Button
<!-- 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 collection="collection", multiple, input-value-change="handleInputValueChange", value-change="handleValueChange", positioning and getAnchorElement. The rest is on the Combobox page.

Button

Sets v-if, value and length. The rest is on the Button page.

All 42 combobox examples