1920 × 1080 · Landscape
Index › Patterns › Filtering
3 filtering patterns
Patterns · Filtering
Narrow the list.
A composed recipe for paring a long index down to what matters — search, quick pills, and a drawer of deeper controls, with every active filter shown as a chip the client can lift off one at a time.
1Filter BarFilterBar · single-row
2Applied Filter Chip RowAppliedFilterChipRow
MR
Maya ReyesSignature Facial · 60 min
Booked
Jun 24 · 10:00
DC
Devon ChoHydrating Facial · 45 min
Booked
Jun 26 · 14:30
AT
Amara TranBrightening Facial · 60 min
Hold
Jun 28 · 11:15
FilterBar.Search + .Select + .PillGroup (single) + a .Actions "More filters" trigger. The selected pill and the trigger's active-count badge are the only places accent fires here.
3Filter DrawerFilterDrawer · applyMode="apply"
Filters
Treatment · multi-select
Facial
Massage
Microneedling
Peel
Status · single
Booked
Hold
Any
Date range
2026-06-01
→
2026-06-30
Reset
Apply
FilterField[] schema renders grouped multi-select checkboxes, a single radio set, and a date-range. With applyMode="apply" the draft holds until Apply commits.
Composes
Input
Select
Checkbox
RadioGroup
Chip
Drawer
Button
When to reach for it
Reach for the assembled recipe when a list has more than one axis to narrow — search plus status plus date. For a single quick filter, a lone PillGroup or Select is enough.
8.5 × 11 · Portrait