Chips

Choice Chip

Use Choice Chips if the user needs to select one out of multiple pre-defined values.
This type of chips can be used to provide a convenient way for the user to choose from a set of predefined values instead of manually typing a value with the keyboard.

Rules For Android

Github: Chips.kt
ChoiceChipGroup (A group of choice chips, shown in a horizontally scrollable list)
FlexChoiceChipGroup (A group of choice chips, shown in a FlowRow)
Within the group items are single-select, similar to radio-groups, selecting a new chip will clear the previous selection.

Filter Chip

Use Filter Chips if the user is allowed to select multiple options out of a set of pre-defined values. As the name implies, this element is made to be used in combination with a list of items - like a search result - to filter the result based on parameters specified by the user.

Selecting a Filter Chip often triggers a modal view to specify additional settings to confirm the selection - and the label of the Filter Chip may change to the specified value in its selected state.

Rules For Android

Github: Chips.kt
FilterChipGroup (A group of filter chips, shown in a horizontally scrollable list)
FlexFilterChipGroup (A group of filter chips, shown in a FlowRow)
Within the group items are multi-select, similar to check-boxes

Layout

Chips stack horizontally by default, and break into multiple lines if the number of options and/or the length of the labels requires it.
Based on the desired layout, they can be be stacked either left-aligned or centered.

To achieve this layout in Figma, use the Single Chip component and create a multi-row auto-layout.

Chips can also be used in a single-line, horizontally scrolling element that exceeds the viewport.

Tokens

Element	Unselected	Selected	Modifier
label	`color.text.secondary`	`color.state.active`	-
icon	-	`color.state.active`	-
border	`color.fill.tertiary`	`color.state.active`	-
fill	-	`color.state.active`	`opacity.soft`