Filter Panel

Beta

Get Ritla UI

A side panel of filters for a table or a list, with chips for the filters that are on.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add filter-panel
Also works with shadcn: npx shadcn@latest add @ritla/filter-panel
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

filter-panel.tsx

import { FilterPanel, FilterSection } from "@/components/ui/filter-panel";<FilterPanel title="Filters" footer={<Button type="submit">Show 24 results</Button>}>  <FilterSection legend="Status">…</FilterSection></FilterPanel>

API reference

FilterPanel

Prop	Type	Default	Description
`title`	`ReactNode`	None	The panel title.
`onClose / closeLabel`	`() => void / string`	None	Figma's Show close: a named close button.
`footer`	`ReactNode`	None	Reset and Apply; Apply says how many results it will show.

FilterSection

Prop	Type	Default	Description
`legend`	`ReactNode`	None	The group's name; omit it when a CheckboxGroup or RadioGroup inside names itself.

AppliedFilters

Prop	Type	Default	Description
`children`	`ReactNode`	None	An `InputChip` per filter that is on.
`onClearAll / clearLabel`	`() => void / string`	None	The Clear all button.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves through the filters, then Reset and Apply.

ARIA

The panel is a form, and each group a named fieldset.
Applied filters are a named group; each chip has a remove button.

Arabic and RTL notes

Mirrors

Close ends the header, and the chips start from the right.

Does not mirror

Amount fields stay left to right.

Numerals: Result counts as the app passes them.
Arabic typography: Legends label-14 Semibold.