Chips

This documentation is fully rendered on the Material Web catalog

Chips help people enter information, make selections, filter content, or trigger actions.

While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Design article
API Documentation
Source code

Types

Assist chip
Filter chip
Input chip
Suggestion chip

Usage

Choose the type of chip based on its purpose and author.

Assist chips are common actions, such as adding an event to a calendar.
Filter chips are tags used to filter content, such as shopping categories.
Input chips are pieces of information entered by a user, such as event attendees.
Suggestion chips represent dynamic suggestions for user input, such as text message replies.

<md-chip-set>
  <md-assist-chip label="Assist"></md-assist-chip>
  <md-filter-chip label="Filter"></md-filter-chip>
  <md-input-chip label="Input"></md-input-chip>
  <md-suggestion-chip label="Suggestion"></md-suggestion-chip>
</md-chip-set>

Chip sets

Chips should always appear in a set. Chip sets are toolbars that can display any type of chip or other toolbar items.

<h3>New event</h3>
<md-chip-set>
  <md-filter-chip label="All day"></md-filter-chip>
  <md-assist-chip label="Add to calendar"></md-assist-chip>
  <md-assist-chip label="Set a reminder"></md-assist-chip>
</md-chip-set>

Icons

All chips may display an optional icon. Input chips can specify if an avatar picture is displayed.

<md-chip-set>
  <md-assist-chip label="Add to calendar">
    <md-icon slot="icon">event</md-icon>
  </md-assist-chip>

  <md-input-chip label="Ping Qiang" avatar>
    <img slot="icon" src="...">
  </md-input-chip>
</md-chip-set>

Elevated

Assist, filter, and suggestion chips can be elevated if the placement requires protection, such as on top of an image.

<div>
  <img src="...">
  <md-chip-set>
    <md-suggestion-chip label="Share" elevated></md-suggestion-chip>
    <md-suggestion-chip label="Favorite" elevated></md-suggestion-chip>
  </md-chip-set>
</div>

Accessibility

Add an aria-label attribute to chip sets or reference a label with aria-labelledby. Add an aria-label to chips whose labels need to be more descriptive.

<h3 id="dates-label">Dates</h3>
<md-chip-set aria-labelledby="dates-label">
  <md-filter-chip label="Mon" aria-label="Monday"></md-filter-chip>
  <md-filter-chip label="Tue" aria-label="Tuesday"></md-filter-chip>
  <md-filter-chip label="Wed" aria-label="Wednesday"></md-filter-chip>
</md-chip-set>

Focusable and disabled

By default, disabled chips are not focusable with the keyboard. Some use cases encourage focusability of disabled toolbar items to increase their discoverability.

See the ARIA guidelines on focusability of disabled controls for guidance on when this is recommended.

<md-chip-set aria-label="Actions">
  <!--
    Disabled until text is selected. Since both are disabled by default, keep
    them focusable so that screen readers can discover the actions available.
  -->
  <md-assist-chip label="Copy" disabled always-focusable></md-assist-chip>
  <md-assist-chip label="Paste" disabled always-focusable></md-assist-chip>
</md-chip-set>
<md-outlined-text-field type="textarea"></md-outlined-text-field>

Assist chip

Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen.

Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI.

<h3>A restaraunt location</h3>
<md-chip-set>
  <md-assist-chip label="Add to my itinerary">
    <md-icon slot="icon">calendar</md-icon>
  </md-assist-chip>
  <md-assist-chip label="12 mins from hotel">
    <md-icon slot="icon">map</md-icon>
  </md-assist-chip>
</md-chip-set>

Filter chip

Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes.

<h3>Choose where to share</h3>
<md-chip-set>
  <md-filter-chip label="Docs"></md-filter-chip>
  <md-filter-chip label="Slides" selected></md-filter-chip>
  <md-filter-chip label="Sheets" selected></md-filter-chip>
  <md-filter-chip label="Images"></md-filter-chip>
</md-chip-set>

Removable

Filter chips can optionally be removable from the chip set. Removable chips have a trailing remove icon.

<h3>Colors</h3>
<md-chip-set>
  <md-filter-chip label="Red" removable selected></md-filter-chip>
  <md-filter-chip label="Yellow" removable></md-filter-chip>
  <md-filter-chip label="Blue" removable></md-filter-chip>
  <md-filter-chip label="Green" removable></md-filter-chip>
</md-chip-set>

Input chip

Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a search field.

Input chips whose icons are user images may add the avatar attribute to display the image in a larger circle.

<md-outlined-text-field label="Attendees" type="email"></md-outlined-text-field>

<md-chip-set>
  <md-input-chip label="Ping Qiang" avatar>
    <img slot="icon" src="...">
  </md-input-chip>
  <md-input-chip label="Thea Schröder" avatar>
    <img slot="icon" src="...">
  </md-input-chip>
</md-chip-set>

Remove-only

All input chips are removable. If an input chip does not have an action associated with clicking on it, it may be marked as remove-only.

<h3>Favorite movies</h3>
<md-chip-set>
  <md-input-chip label="Star Wars" remove-only></md-input-chip>
  <md-input-chip label="Star Trek" remove-only></md-input-chip>
</md-chip-set>

Suggestion chip

Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses or search filters.

<h3>Suggested reply</h3>
<md-chip-set>
  <md-suggestion-chip label="I agree"></md-suggestion-chip>
  <md-suggestion-chip label="Looks good to me"></md-suggestion-chip>
  <md-suggestion-chip label="Thank you"></md-suggestion-chip>
</md-chip-set>

Theming

Chips support Material theming and can be customized in terms of color, typography, and shape.

Assist chip tokens

Token	Default value
`--md-assist-chip-outline-color`	`--md-sys-color-outline`
`--md-assist-chip-container-shape`	`--md-sys-shape-corner-small`
`--md-assist-chip-icon-size`	`18px`
`--md-assist-chip-label-text-color`	`--md-sys-color-on-surface`
`--md-assist-chip-label-text-font`	`--md-sys-typescale-label-large-font`

All tokens

Assist chip example

<style>
:root {
  --md-assist-chip-container-shape: 0px;
  --md-assist-chip-label-text-font: system-ui;
  --md-sys-color-outline: #6F7979;
  --md-sys-color-on-surface: #191C1C;
}
</style>

<md-assist-chip label="Assist"></md-assist-chip>

Filter chip tokens

Token	Default value
`--md-filter-chip-selected-container-color`	`--md-sys-color-secondary-container`
`--md-filter-chip-outline-color`	`--md-sys-color-outline`
`--md-filter-chip-container-shape`	`--md-sys-shape-corner-small`
`--md-filter-chip-icon-size`	`18px`
`--md-filter-chip-label-text-color`	`--md-sys-color-on-surface`
`--md-filter-chip-label-text-font`	`--md-sys-typescale-label-large-font`

All tokens

Filter chip example

<style>
:root {
  --md-filter-chip-container-shape: 0px;
  --md-filter-chip-label-text-font: system-ui;
  --md-sys-color-outline: #6f7979;
  --md-sys-color-on-surface: #191c1c;
  --md-sys-color-secondary-container: #cce8e7;
}
</style>

<md-filter-chip label="Filter"></md-filter-chip>

Input chip tokens

Token	Default value
`--md-input-chip-outline-color`	`--md-sys-color-outline`
`--md-input-chip-container-shape`	`--md-sys-shape-corner-small`
`--md-input-chip-icon-size`	`18px`
`--md-input-chip-label-text-color`	`--md-sys-color-on-surface`
`--md-input-chip-label-text-font`	`--md-sys-typescale-label-large-font`

All tokens

Input chip example

<style>
:root {
  --md-input-chip-container-shape: 0px;
  --md-input-chip-label-text-font: system-ui;
  --md-sys-color-outline: #6f7979;
  --md-sys-color-on-surface: #191c1c;
}
</style>

<md-input-chip label="Input"></md-input-chip>

Suggestion chip tokens

Token	Default value
`--md-suggestion-chip-outline-color`	`--md-sys-color-outline`
`--md-suggestion-chip-container-shape`	`--md-sys-shape-corner-small`
`--md-suggestion-chip-icon-size`	`18px`
`--md-suggestion-chip-label-text-color`	`--md-sys-color-on-surface`
`--md-suggestion-chip-label-text-font`	`--md-sys-typescale-label-large-font`

All tokens

Suggestion chip example

<style>
:root {
  --md-suggestion-chip-container-shape: 0px;
  --md-suggestion-chip-label-text-font: system-ui;
  --md-sys-color-outline: #6f7979;
  --md-sys-color-on-surface: #191c1c;
}
</style>

<md-suggestion-chip label="Suggestion"></md-suggestion-chip>

API

MdChipSet `<md-chip-set>`

Properties

Property	Attribute	Type	Default	Description
`chips`		`Chip[]`	`undefined`

MdAssistChip `<md-assist-chip>`

Properties

Property	Attribute	Type	Default	Description
`elevated`	`elevated`	`boolean`	`false`
`href`	`href`	`string`	`''`
`target`	`target`	`string`	`''`
`disabled`	`disabled`	`boolean`	`false`	Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set.
`alwaysFocusable`	`always-focusable`	`boolean`	`false`	When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
`label`	`label`	`string`	`''`	The label of the chip.

MdFilterChip `<md-filter-chip>`

Properties

Property	Attribute	Type	Default	Description
`elevated`	`elevated`	`boolean`	`false`
`removable`	`removable`	`boolean`	`false`
`selected`	`selected`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`	Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set.
`alwaysFocusable`	`always-focusable`	`boolean`	`false`	When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
`label`	`label`	`string`	`''`	The label of the chip.
`handleTrailingActionFocus`		`() => void`	`undefined`
`ariaLabelRemove`		`string`	`undefined`

MdInputChip `<md-input-chip>`

Properties

Property	Attribute	Type	Default	Description
`avatar`	`avatar`	`boolean`	`false`
`href`	`href`	`string`	`''`
`target`	`target`	`string`	`''`
`removeOnly`	`remove-only`	`boolean`	`false`
`selected`	`selected`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`	Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set.
`alwaysFocusable`	`always-focusable`	`boolean`	`false`	When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
`label`	`label`	`string`	`''`	The label of the chip.
`handleTrailingActionFocus`		`() => void`	`undefined`
`ariaLabelRemove`		`string`	`undefined`

MdSuggestionChip `<md-suggestion-chip>`

Properties

Property	Attribute	Type	Default	Description
`elevated`	`elevated`	`boolean`	`false`
`href`	`href`	`string`	`''`
`target`	`target`	`string`	`''`
`disabled`	`disabled`	`boolean`	`false`	Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set.
`alwaysFocusable`	`always-focusable`	`boolean`	`false`	When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
`label`	`label`	`string`	`''`	The label of the chip.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chip.md

chip.md

Chips

Types

Usage

Chip sets

Icons

Elevated

Accessibility

Focusable and disabled

Assist chip

Filter chip

Removable

Input chip

Remove-only

Suggestion chip

Theming

Assist chip tokens

Assist chip example

Filter chip tokens

Filter chip example

Input chip tokens

Input chip example

Suggestion chip tokens

Suggestion chip example

API

MdChipSet `<md-chip-set>`

Properties

MdAssistChip `<md-assist-chip>`

Properties

MdFilterChip `<md-filter-chip>`

Properties

MdInputChip `<md-input-chip>`

Properties

MdSuggestionChip `<md-suggestion-chip>`

Properties

Files

chip.md

Latest commit

History

chip.md

File metadata and controls

Chips

Types

Usage

Chip sets

Icons

Elevated

Accessibility

Focusable and disabled

Assist chip

Filter chip

Removable

Input chip

Remove-only

Suggestion chip

Theming

Assist chip tokens

Assist chip example

Filter chip tokens

Filter chip example

Input chip tokens

Input chip example

Suggestion chip tokens

Suggestion chip example

API

MdChipSet <md-chip-set>

Properties

MdAssistChip <md-assist-chip>

Properties

MdFilterChip <md-filter-chip>

Properties

MdInputChip <md-input-chip>

Properties

MdSuggestionChip <md-suggestion-chip>

Properties

MdChipSet `<md-chip-set>`

MdAssistChip `<md-assist-chip>`

MdFilterChip `<md-filter-chip>`

MdInputChip `<md-input-chip>`

MdSuggestionChip `<md-suggestion-chip>`