Skip to content

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

Free

Filter Popover for Ark UI

A Filter button that opens Active, Pending, and Archived checkboxes. Active starts checked, with Apply Filters under them.

Filter opens Filter Options. Three checkboxes are listed: Active, Pending, and Archived. Active starts checked. Apply Filters spans the panel and closes it.

Use it to keep filters next to the list they narrow, instead of in a sidebar. Apply does not filter the list until you read the boxes. A filter that is the whole page fits a Sheet. In React, Ark UI does not apply the filters.

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

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">
      <FilterIcon aria-hidden="true" data-icon="inline-start" />
      Filter
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-80 max-w-full">
    <PopoverTitle>Filter Options</PopoverTitle>
    <FieldGroup className="gap-3">
      {statuses.map((status) => (
        <Field key={status.value} orientation="horizontal">
          <Checkbox
            defaultChecked={status.checked}
            name="status"
            value={status.value}
          />
          <FieldLabel className="font-normal">{status.label}</FieldLabel>
        </Field>
      ))}
    </FieldGroup>
    <PopoverClose asChild>
      <Button className="w-full" size="sm">
        Apply Filters
      </Button>
    </PopoverClose>
  </PopoverContent>
</Popover>

FAQ

How are the status checkboxes built?

statuses lists Active, Pending and Archived. Each row is a Field with orientation="horizontal", a Checkbox named status with the status as its value, and a FieldLabel.

Which filter starts checked?

Active, whose entry has checked: true. Pending and Archived start unchecked. The checkboxes take it as their starting value only, so they stay uncontrolled. The prop is defaultChecked on Checkbox.

How do I close this panel from code?

Apply Filters closes the panel. Here each button sits in PopoverClose, which closes the panel without any state. To close it from your own code, control the open state on Popover. Pass open and onOpenChange on Popover. The callback gets { open }.

How does the Filter button become the trigger?

The trigger is a Button with variant="outline". FilterIcon has aria-hidden="true" and data-icon="inline-start", and the label is Filter. PopoverContent is w-80 max-w-full, and PopoverTitle reads Filter Options. Set asChild on PopoverTrigger and pass that one button. PopoverContent is the panel.

What does Apply Filters change on the page?

Nothing yet: it closes the panel, and nothing reads the checkboxes. Read their values, or control them, to filter your data. The button is size="sm" and w-full.

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

API Reference

Popover

Sets asChild. The rest is on the Popover page.

Button

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

Field

Sets orientation="horizontal". The rest is on the Field page.

Checkbox

Sets defaultChecked={status.checked}, name="status" and value={status.value}. The rest is on the Checkbox page.

All 15 popover examples