FilterGroup

A named set of filter chips.

Overview

Two or more ToggleChips that filter the same thing.

Legend

Do
Type of shop
import { FilterGroup, ToggleChip } from "@hackcove/ui";

<FilterGroup legend="Type of shop">
  <ToggleChip pressed dot="#7c3aed">
    Vintage
  </ToggleChip>
  <ToggleChip pressed={false} dot="#0891b2">
    Books
  </ToggleChip>
  <ToggleChip pressed={false} dot="#ca8a04">
    Furniture
  </ToggleChip>
</FilterGroup>
A FilterGroup names a set of chips with a legend, so the group is announced and the chips wrap together.
Don't
import { Cluster, ToggleChip } from "@hackcove/ui";

<Cluster gap="xs" wrap>
  <ToggleChip pressed>Vintage</ToggleChip>
  <ToggleChip pressed={false}>Books</ToggleChip>
  <ToggleChip pressed={false}>Furniture</ToggleChip>
</Cluster>
Chips with no group have no name: a screen reader hears a row of buttons and not what they filter.

Facets

Do
Type of shop
Open
import { FilterGroup, Stack, ToggleChip } from "@hackcove/ui";

<Stack gap="sm">
  <FilterGroup legend="Type of shop">
    <ToggleChip pressed>Vintage</ToggleChip>
    <ToggleChip pressed={false}>Books</ToggleChip>
  </FilterGroup>
  <FilterGroup legend="Open">
    <ToggleChip pressed={false}>Now</ToggleChip>
    <ToggleChip pressed>Saturdays</ToggleChip>
  </FilterGroup>
</Stack>
One FilterGroup per facet, stacked: each keeps its own legend and its own row of chips.

Usage

  • The legend names the set, such as the type of shop; the chips below wrap onto further lines when they run out of room.
  • One FilterGroup per facet; stack several in a Stack.
  • The children are ToggleChips.

Accessibility

  • A <fieldset> with a <legend>, so a screen reader announces the group's name on entering it.
  • disabled on the group disables every chip in it.

API

FilterGroup

A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset.

legend required
Type
ReactNode