Usage
A chip filters the content on the screen down to a predefined category. Use a set of chips above a list or a set of results so people can narrow what they see without leaving the screen.
- Use to narrow a list or a set of search results.
- Use alongside a search field or a sheet when filtering supports the main task.
- Decide whether a set is single-select or multi-select, and keep that behavior consistent across the set.
- Use a chip in place of a button. A chip filters content, a button acts on it.
- Use a single chip on its own.
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Hovered | Focused | Pressed | Disabled | Enabled |
| Selected Variant | False | True | False |
Types
Filter chip
Use in a set to narrow a list or search results down to a predefined category.
Behavior and interaction
Behavior
- Touching a chip selects it and shows a leading checkmark before the label.
- A set is either single-select or multi-select. Don’t mix the two behaviors within one set.
- Selecting a chip filters the content straight away. There is no separate apply step.
Positioning
- Place a chip set above the content it filters.
- The set scrolls horizontally when the options run past the edge of the screen.
Writing guidelines
- Use sentence case.
- Skip conventional grammar rules, such as articles to save space: “Add bookmark”, not “Add a bookmark.”
- Use concise nouns that describe the category to be included in the results. Avoid negative phrasing, such as “Exclude images.”
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 1, 2025 |
2.0.0 |
Updated to reflect M3 changes |
|
Apr 15, 2025 |
1.0.0 |
Initial draft of guidance |