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 |