Chips
Intro
Chips are interactive elements that provide users with a set of options. Users can tap a chip to make selections. There are two types of chips: choice chip and filter chip. When the names of the options fit within the chip, choice chip is an alternative for radio button and filter chip is an alternative for checkbox.
Usage
Do’s
- Use chips when you need to help users quickly choose between at least two (no more than 8) clearly distinct choices.
- Use chips to optimize screen space when the text of value is relatively short.
Don’ts
- Do not use chips when the text of value is very long, even if the number of options is no more than 8. Use a list picker form cell instead.
- Do not use chips when the number of options is more than 8, use a list picker form cell.
Chip Structure
A. Container
Chip container defines the boundary of each chip. All chip elements are wrapped in a chip container. The width of the container depends on the length of its content. Each container is a touch target.
B. Text Label
Text label describes what each chip stands for. Text labels should be concise.
C. Check Mark (Filter Chip Only)
A check mark appears when a filter chip is selected and disappears when it’s deselected. The check mark communicates to users that this is a multiple selection (filter chip) instead of single selection (choice chip).

Types
Choice Chip
Choice chips provide users with a set of mutually exclusive options. The user taps one chip to activate the option. Tapping a different chip transfers activation to that option. Therefore, only one chip can be selected in a group of choice chips. Choice chips can be an alternative for radio buttons.

Color and States
For each chip type, there are two sets of visual treatment: Filled & Outlined.
The app designer should choose one that works best in the app. DO NOT use both filled & outlined chips on one screen. Choose either filled or outlined based on the visual consistency among chips and other components in the page.

Filter Chip
Filter chips allow users to select multiple options from a set of values. Each chip toggles between selected and unselected.
When selected, a checkmark appears in front of the text label and pushes the text to the right. The chip container expands horizontally as the check mark shows. The checkmark, which does not show up in single selection chips, provides a visual cue for the users to differentiate multiple selection from single selection. The checkmark disappears when the chip is deselected. The text label shifts left and the chip container returns to its original size.

Color and States
For each chip type, there are two sets of visual treatment: Filled & Outlined.
The app designer should choose one that works best in the app. DO NOT use both filled & outlined chips on one screen. Choose either filled or outlined based on the visual consistency among chips and other components in the page.

Chip Form Cell
A group of chips are typically displayed horizontally under the title. The title describes the meaning or purpose of the group. More than one row of chips can wrap to the next row, or overflow to the right with horizontal scroll to show more. Choose the layout that provides the best readability for your use case.


Validation Message
Use validation message only when necessary: to show error message or direct feedback of this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.
The validation message should be concise. One line of text is recommended for the validation message.
By default, there is no validation message. When the validation message is triggered, insert the message with padding after the last row of chips (before the divider line if used). The content under it will be pushed down.

Specs
Choice Chip & Filter Chip


Chip Form Cell
Padding Between Chips
Use 8dp horizontal padding between each chip in a row.
Use 8dp vertical padding between each row of chips. This is an exception of 48dp touch target size to achieve a visually balanced layout.

Mobile
The width of the cell depends on the container. Typically it’s full-width, which follows the 16dp keyline.




Tablet
The width of the cell depends on the container. It can follow the 24dp or 80dp keyline depending on page layout. In a modal dialog, use 24dp left and right padding.




Filled Chips
Sample | Element | Alpha Hex |
|
Unselected chip fill color | #F2F2F2 |
|
Unselected chip text | #6A6D70 |
|
Selected chip fill color | #D7E4F0 |
|
Selected chip textCheckmark | #0854A0 |
Outlined Chips
Sample | Element | Alpha Hex |
|
Unselected chip fill color | #FFFFFF |
|
Unselected chip border color | #89919A |
|
Unselected chip text | #6A6D70 |
|
Selected chip fill color | #ECF2F8 |
|
Selected chip border color | #6393C3 |
|
Selected chip textCheckmark | #0854A0 |
Chip Form Cell
Sample | Element | Alpha Hex |
|
Form cell label text | #6A6D70 |
|
Error message textError State label | #BB0000 |
|
Success message | #107E3E |