Skip to content

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

Free

Search and Filter Sheet for Vue

A Filters button opens a right-side sheet with a search field, three category checkboxes, and an Apply Filters button.

UI library: Ark UI

The title is Search & Filter. A Search field comes first, then Categories with Category 1, Category 2, and Category 3. Apply Filters sits at the bottom.

Use it when filters should not push the results down the page. Keep one or two on the page as a Checkbox if people use them every time. In Vue, Ark UI does not filter the list.

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

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger :asChild="true">
    <Button variant="outline">Filters</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Search &amp; Filter</SheetTitle>
      <SheetDescription>Refine your search with filters below.</SheetDescription>
    </SheetHeader>
    <FieldGroup class="gap-4 p-4">
      <Field>
        <FieldLabel>Search</FieldLabel>
        <Input placeholder="Search..." type="search" />
      </Field>
      <FieldSet class="gap-3">
        <FieldLegend variant="label">Categories</FieldLegend>
        <FieldGroup class="gap-3">
          <Field v-for="category in CATEGORIES" :key="category.id" orientation="horizontal">
            <Checkbox />
            <FieldLabel class="font-normal">{{ category.label }}</FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <Button class="w-full">Apply Filters</Button>
    </FieldGroup>
  </SheetContent>
</Sheet>

FAQ

How are the categories grouped?

In a FieldSet whose FieldLegend reads Categories. Each category is a horizontal Field with the checkbox first and its label after, so clicking the label toggles the box.

Does Apply Filters filter anything?

Not yet: the checkboxes are uncontrolled and the button has no handler. Read the values when it's pressed, apply them to your list, and close the sheet.

How do I close the sheet after applying?

Control the open state and set it to false in the Apply handler: Pass open to Sheet and listen to @open-change, which receives details.open.

How does Filters open the sheet?

The outline button labeled Filters is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

What does the filter sheet announce?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Search & Filter, with Refine your search with filters below as the description.

API Reference

Sheet

Sets asChild. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets variant="label", v-for="category in CATEGORIES", key="category.id" and orientation="horizontal". The rest is on the Field page.

Input

Sets placeholder="Search..." and type="search". The rest is on the Input page.

Checkbox

No extra props in this demo. The rest is on the Checkbox page.

All 29 sheet examples