When to use
Chips allow a user to filter a collection of content. The label shows a tag or a descriptive word of the filtered content (or better said, the selected content). They can be a good alternative to checkboxes when viewing a list or search results.
Specifically, a Filter Chip can be applied when one or more of the following applies:
- To select one or multiple options in order to (instantly) filter a collection of content;
- As an alternative to checkboxes when viewing a list or results;
- As a way to use space more efficiently as they are (more) suited for horizontal alignment;
- As a way to show available (filter) options more visually (using a trailing icon).
Placement
Chips are suited for horizontal alignment, wrapping it to a second line when space is insufficient. The margin between individual Filter Chips within a group should be sufficient but not too large. An 8px margin is recommended.
For readability purposes, we left-align our content as much as possible. Make sure to align Filter Chips with the content on the page.