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

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

Outlined Chips

Chip Form Cell