Support the page structure
On catalogue, search, or admin list pages where users narrow down results
Templates
Filter
Sidebar filter panels with grouped facet controls for narrowing search and listing pages.
Keep the layout consistent
When you have multiple facet groups (status, type, date) that combine independently
Use it intentionally
For pages with fewer than ~6 results — filters add noise without value
Sidebar filter
Faceted filter panel with header, clear-all link, and grouped checkbox controls.
When to use
- On catalogue, search, or admin list pages where users narrow down results
- When you have multiple facet groups (status, type, date) that combine independently
- When the filter set is stable enough to live in a sidebar
When not to use
- For pages with fewer than ~6 results — filters add noise without value
- When filters need to be applied across multi-step flows — use a wizard instead
Keyboard support
Use the SGDS components inside the filter pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/filter