FilterBar

FilterBar helps users easily filter datasets using one or more filter criteria. A range of form elements can be added as filter controls.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles

Each FilterBar.Item must have an accessible name so screen readers can identify it in the "Add filter" dropdown and when it is pinned.

• Do provide a visible label for every FilterBar.Item.
• Do provide an aria-label or name for pinned-optional and optional items without visible text content — these are required for the "Add filter" dropdown.
• Do provide an aria-label or name for custom components used as FilterBar.Item if there is no visible text content.

Keyboard accessibility and focus

FilterBar handles focus management out of the box. When an optional filter is pinned from the "Add filter" dropdown, focus moves automatically to the newly pinned filter item.

• Don't override the component's built-in focus handling. Focus must move to the pinned item so screen readers can announce it correctly.

State announcements

Each control within FilterBar manages its own state announcements. Refer to the documentation for the individual form component used.