Skip to content
Twentyfirst UIHalo

Filter Sidebar

A complete screen built only from kit parts: Sidebar, RangeSlider, Badge, Button, Card, Chip, PageHeader, SearchField …

View as Markdown

Results with their filters in a sidebar: Sidebar as="aside" turns the navigation into a complementary region for tools beside the content.

  • Items with checked and onCheckedChange are filter options with their count; in a group with select: "single" they are radios (one choice).
  • content puts anything into a group: a RangeSlider, date fields, chips.
  • Groups stay collapsible; collapsible (default false for an aside) hides the icons-only mode.
  • On phones the filters open as a drawer behind a filter button.
Filters2

Homes for sale

200 results

Bright loft by the canalApartment · 3 rooms
€640,000New
Townhouse with gardenHouse · 5 rooms
€1,180,000Garden
Corner flat, top floorApartment · 2 rooms
€420,000Lift
Studio near the parkApartment · 1 rooms
€289,000Balcony