09 • Patterns · Filter

Filter bar

Multi-group filter with single/multi select semantics. Single-select groups use role=radio; multi-select use role=checkbox. Clear all button appears when any filter is active.

Filters
Severity
Region
Status

Current state

{}

Accessibility

  • role="group" on outer container with aria-label.
  • role="radiogroup" / role="checkbox" per mode. Screen readers announce group semantics + selected state.
  • aria-labelledby links each group to its label heading.
  • aria-checked reflects current selection state.
  • "Clear all" button hidden when no filters active (no noise).