Chips

Chips are compact elements that represent an input, attribute, or action.


Usage

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.

Principles

Chips are compact, relevant and focused.

Read More

Compact

Chips are compact components that represent discrete information.

Relevant

Chips should have a clear and helpful relationship to the content or task they represent.

Focused

Chips should make tasks easier to complete, or content easier to sort.

Types

There are input, choice, filter and action chips.

Read More

Input chips

Input chips represent information used in fields, such as an entity or different attributes.

Choice chips

In sets that contain at least two options, choice chips represent a single selection.

Filter chips

Filter chips represent filters for a collection.

Action chips

Action chips trigger actions related to primary content.


Anatomy

1. Container

Chip containers hold all chip elements, and their size is determined by those elements. A container can also be defined by a stroke.

2. Thumbnail (optional)

Thumbnails identify entities (like individuals) by displaying an avatar, logo, or icon.

3. Text

Chip text can be an entity name, description, tag, action, or conversational.

4. Remove icon [optional]

Entry chips can include a Remove icon.


Input chips

Usage

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input...

Read More

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.

An input chip used to show an entity.

An outlined input chip used to show an entity.

Input chips can provide suggested responses.

Behavior

Input chips are predictive, editable, movable, expandable, and appear in groups.

Read More

Transformative

Input chips transform text based on user input.

Text transforming into an input chip.

Editable

An input chip’s text is editable until the user takes an action with the chip, such as sending an email. To edit an input chip’s text, tap the chip.

Input chips become editable when tapped.

Informational

If text input is not recognized by the system, input chips can display an error state.

Input chips can represent an error state.

Multiple

A single field can contain multiple entry chips.

Multiple entry chips

Movable

Entry chips can be reordered or moved into other fields.

Movable entry chips

Expandable

Input chips can expand to show more information or options.

Expandable entry chips

Placement

Input chips work together with other UI elements.

Read More

Input chips can be integrated with other components. They can appear:

  • Inline with the text input cursor in a field
  • In a stacked list
  • In a horizontally scrollable list

Input chips can wrap to a new row if all of the chips need to be visible.

Input chips that horizontally scroll.

States

Input chips states

Read More

Input chips states


Choice chips

Usage

Choice chips allow selection of a single chip from a set of options. Choice chips clearly delineate and display options in a compact area. They...

Read More

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

A set of choice chips

A set of outlined choice chips

Behavior

Selecting a single choice chip automatically deselects all other chips in the set.

Read More

Selecting a single choice chip automatically deselects all other chips in the set.

Selecting a choice chip deselects the other chips

Placement

Choice chips appear as part of a series of other choice chips. They are typically displayed horizontally and sequentially. An overlay is a semi-transparent covering...

Read More

Choice chips appear as part of a series of other choice chips. They are typically displayed horizontally and sequentially.

Do.

Horizontal placement of choice chips

Do.

Choice chips can scroll horizontally.

Caution.

Choice chips can wrap to a new row. However, using two or more rows of choice chips can make each chip harder to scan.

Don’t.

Choice chips shouldn’t present only a single option.

States

Choice chips states

Read More

Do.

Choice chips states


Filter chips

Usage

Filter chips use tags or descriptive words to filter content. Filter chips clearly delineate and display options in a compact area. They are a good...

Read More

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

A filter chip

An outlined filter chip

Behavior

Tap a chip to select it. Multiple chips can be selected or unselected.

Read More

Tap a chip to select it. Multiple chips can be selected or unselected.

An icon can be added to indicate when a filter chip is selected.

Filter chip suggestions can dynamically change as users start to select filters.

Placement

Filter chips can live with other elements in a UI.

Read More

Filter chips can be shown underneath a search field.

Display multiple sets of filters in a side sheet.

Filter chips can wrap to a new row. If there are more than two rows, consider using horizontal scrolling to access them all.

Filter chips can horizontally scroll to show unlimited options.

Don’t.

Filter chips should not present only a single option.

States

Choice chips states

Read More

Filter chips states


Action chips

Usage

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI. An alternative to action chips are buttons, which...

Read More

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

An action chip

An outlined action chip

Behavior

Action chips can trigger an action or show progress and confirmation.

Read More

Action chips can trigger an action or show progress and confirmation.

Tapping an action chip triggers a contextual action.

Action chips can show progress and confirmation feedback.

Placement

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen. Buttons allow users to take...

Read More

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen.

Action chips should be shown underneath primary content.

Caution.

Action chips should appear in a set.

Do.

Action chips can be horizontally scrollable.

States

Choice chips states

Read More

Action chips states


Action chips

Usage

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI. An alternative to action chips are buttons, which...

Read More

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

An action chip

An outlined action chip

Behavior

Action chips can trigger an action or show progress and confirmation.

Read More

Action chips can trigger an action or show progress and confirmation.

Tapping an action chip triggers a contextual action.

Action chips can show progress and confirmation feedback.

Placement

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen. Buttons allow users to take...

Read More

Action chips are displayed after primary content, such as below a card or persistently at the bottom of a screen.

Action chips should be shown underneath primary content.

Caution.

Action chips should appear in a set.

Do.

Action chips can be horizontally scrollable.

States

Choice chips states

Read More

Action chips states


Theming

Reply Material Theme

This email app’s input chips have been customized using Material Theming. Areas of customization include color, typography, and shape. Reply is an email app that...

Read More

This email app’s input chips have been customized using Material Theming. Areas of customization include color, typography, and shape.

Reply’s customized input chips

Color

Reply’s input chips uses custom color on two elements: text, container.

Element

Category

Attribute

Value

Text

On Surface

Color

Opacity

#232F34

100%

Container

On Surface

Color

Opacity

#232F34

12%

Typography

Reply’s input chips use custom typography for the text.

Element

Category

Attribute

Value

Text

Body 2

Typeface

Font

Size

Case

Work Sans

Regular

15

Sentence case

Shape

Reply’s input chip containers have custom corner shapes.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Rounded 16dp

Rounded 16dp

Rounded 16dp

Rounded 16dp

Shrine Material Theme

Choice chips with customized shape, color, and typography.

Read More

This retail app’s choice chips have been customized using Material Theming. Areas of customization include color, typography, and shape.

Shrine’s customized choice chips

Color

Shrine’s choice chips uses custom color on four elements: selected container, selected text, unselected container, and unselected text.

Element

Category

Attribute

Value

Selected container

Primary

Color

Opacity

#FEDBD0

100%

Selected text

On Primary

Color

Opacity

#442C2E

100%

Unselected text

On Surface

Color

Opacity

#442C2E

100%

Unselected container

On Surface

Color

Opacity

#442C2E

12%

Typography

Shrine’s choice chips use custom typography for the text.

Element

Category

Attribute

Value

Text

Body 2

Typeface

Font

Size

Case

Rubik

Medium

14

Sentence case

Shape

Reply’s choice chip containers have custom corner shapes.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Rounded 8dp

Rounded 8dp

Rounded 8dp

Rounded 8dp

Fortnightly Material Theme

Filter chips with customized shape, color, and typography.

Read More

This news app’s filter chips have been customized using Material Theming. Areas of customization include color, typography, and shape.

Fortnightly’s customized filter chips.

Color

Fortnightly’s filter chips uses custom color on two elements: text, and container stroke.

Element

Category

Attribute

Value

Text

On Surface

Color

Opacity

#000000

87%

Container stroke

On Surface

Color

Opacity

#000000

12%

Typography

Fortnightly’s filter chips use custom typography for the text.

Element

Category

Attribute

Value

Text

Body 2

Typeface

Font

Size

Case

Libre Franklin

Regular

14

Title case

Shape

Fortnightly’s filter chip containers have custom corner shapes.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Sharp 0dp

Sharp 0dp

Sharp 0dp

Sharp 0dp


Specs

Action chip

  • Measurement 32
  • Measurement 12
  • Measurement 12
  • Measurement C

Outlined action chip

  • Measurement 4
  • Measurement 12
  • Measurement 8
  • Measurement 1
  • Measurement 32
  • Measurement 24
  • Measurement C

Choice chip

  • Measurement 12
  • Measurement 12
  • Measurement 32
  • Measurement C

Filter chip

  • Measurement 12
  • Measurement C
  • Measurement 32
  • Measurement 12

Input chip

  • Measurement 4dp
  • Measurement 8
  • Measurement 8
  • Measurement 32
  • Measurement C
  • Measurement 24
  • Measurement 18
  • Measurement 8

Chips in groups

  • Measurement 8

Implementation

Chips implementation support for each platform is indicated below.

Android Material Component

Status: Code Available

IOS Material Component

Status: Code Available

Flutter Material Component

Status: Code Available

Web Material Component

Status: Code Available