Skip to content
Pinky UI

data

Filter Rail

A grouped filter rail keeps active choices, removal and result context in one compact surface.

  • data
  • filter
  • rail
  • selection

Live preview

Status
Owner

16 results

Choose one option per filter group. Selected filters can be removed below.

Quick usage

usage
import { FilterRail } from "@pinky-ui/systems";

<FilterRail groups={groups} value={filters} onValueChange={setFilters} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
groupsFilterRailGroup[]—Grouped single-select options rendered as a responsive rail.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Each option is a real button with pressed state and a visible All reset.
  • Active filters can be removed individually or cleared together on touch and keyboard.

Performance

  • Only discrete selection changes update the rail; horizontal option lists stay native scrollable on small screens.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Collection and data views with a few mutually exclusive filter groups

When not to use

  • Complex boolean query builders or dozens of options

Skill

Purpose

A grouped filter rail keeps active choices, removal and result context in one compact surface instead of a sprawling filter sidebar.

Good for

  • Collection and data views with a few mutually exclusive filter groups

Avoid for

  • Complex boolean query builders or dozens of options

Usage

tsx
<FilterRail groups={groups} value={filters} onValueChange={setFilters} />

Accessibility

  • Each option is a real button with pressed state and a visible All reset.
  • Active filters can be removed individually or cleared together on touch and keyboard.

Performance

  • Only discrete selection changes update the rail; horizontal option lists stay native scrollable on small screens.

Related: morph-select, selection-tray.

Open this skill on its own page