Skip to content

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

Free

Search and Filter Sheet for Ark UI

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

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 React, Ark UI does not filter the list.

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

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

Usage

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Filters</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Search &amp; Filter</SheetTitle>
      <SheetDescription>
        Refine your search with filters below.
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field>
        <FieldLabel>Search</FieldLabel>
        <Input placeholder="Search..." type="search" />
      </Field>
      <FieldSet className="gap-3">
        <FieldLegend variant="label">Categories</FieldLegend>
        <FieldGroup className="gap-3">
          {CATEGORIES.map((category) => (
            <Field key={category.id} orientation="horizontal">
              <Checkbox />
              <FieldLabel className="font-normal">
                {category.label}
              </FieldLabel>
            </Field>
          ))}
        </FieldGroup>
      </FieldSet>
      <Button className="w-full">Apply Filters</Button>
    </FieldGroup>
{/* The rest of the file is under Installation. */}

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 read details.open in onOpenChange.

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" 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