Components / Overlays / Filter screenOpen in Figma
Filter screen
ReadyA full screen for narrowing a list by several categories at once.
When to use
- A list can be narrowed by more than one category, such as status, site and date.
- Each category has more options than fit in a row of chips.
When not to use
| If people need to | Use |
|---|---|
| Switch between a few views of a list | Chips or Primary tabs |
| Find one item by name | Search and filter row |
| Choose one option | Bottom sheet |
Anatomy
- Title with count · required: "Filter - n", the number of options chosen
- Close · required
- Category rail · required, 162 wide
- Active category · white
- Search · when a category has many options
- Option · checkbox and label
- Result count · required: how many records match
- Clear all · required
- Apply · required
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Full screen | The only form; filters never open as a small sheet | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Nothing selected | No options chosen | Title reads "Filter - 0"; result count shows the whole list | Designed |
| Some selected | One or more options chosen | Checked boxes; the title count and result count update at once | Designed |
Behaviour
- Tapping a category in the rail shows its options on the right.
- The result count updates as options change, before Apply.
- Apply closes the screen and filters the list. Close drops changes made since opening.
- Clear all unticks every option in every category but keeps the screen open.
- The filter button on the list shows the number of options in use.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Form | Full screen | Not designed yet; ask before building |
Content
| Part | Rule |
|---|---|
| Title | "Filter - " and the number chosen |
| Category | A noun, one or two words |
| Option | The value as it appears on the cards |
| Result count | Number and noun: "12 results" |
Do and don't
12 results
DoShow how many records will match before people apply.
Don'tMake people apply to find out nothing matches.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Screen | Fill | ||
| Size | |||
| Header | Padding | ||
| Shadow | |||
| Title | Type | ||
| Colour | |||
| Close | Size | ||
| Rail | Width | ||
| Fill | |||
| Rail item | Height | ||
| Padding | |||
| Type | |||
| Colour | |||
| Active | |||
| Options panel | Padding | ||
| Gap | |||
| Search | Fill | ||
| Border | |||
| Corners | |||
| Padding | |||
| Icon | |||
| Type | |||
| Option | Checkbox | ||
| Gap | |||
| Type | |||
| Rows | |||
| Footer | Height | ||
| Padding | |||
| Gap | |||
| Shadow | |||
| Result count | Type | ||
| Clear all | Style | ||
| Type | |||
| Apply | Style | ||
| Type |
Accessibility
- The rail is a list of tabs; the active one is announced as selected.
- Each option is a checkbox with its label; ticked and unticked are different icons.
- The result count is announced when it changes.
- White on Antz green scores 2.4 for readability, below 4.5. "Apply" stays one short word at 16 Semibold; this is a known gap in the palette.
- Option rows are 18 tall in Figma; the touch area extends to the full row width and at least 44 tall.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Added from the Training and Help Desk filter screens. |