Skip to main content brightness_auto motion_photos_off palette download more_vert
toc

Chips

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

View as Markdown

Breakfast Lunch Dinner 
<md-gb-chip-set aria-label="Meal filters">
  <md-gb-chip type="filter" selected>Breakfast</md-gb-chip>
  <md-gb-chip type="filter">Lunch</md-gb-chip>
  <md-gb-chip type="filter">Dinner</md-gb-chip>
</md-gb-chip-set>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-chip.json (setup)

Usage guidelines

Link to “Usage guidelines”
  • Pick the type by purpose. Assist chips are smart actions, filter chips filter content, input chips are information a person entered, and suggestion chips offer dynamic replies or queries.
  • Show chips as a set. Unlike buttons, chips appear dynamically as a group, so always place them in a chip set.
  • Elevate only for protection. Use elevated chips when they sit on an image or a busy background.
  • Keep them compact. Reduce density when space is tight.

Anatomy

Link to “Anatomy”

A chip set holds chips, and each chip holds its label and optional icons.

place arrow_drop_down Nearby Open late 
<md-gb-chip-set aria-label="Places">
  <md-gb-chip>
    <md-gb-icon slot="icon">place</md-gb-icon>
    <md-gb-icon slot="trailing-icon">arrow_drop_down</md-gb-icon>
    Nearby
  </md-gb-chip>
  <md-gb-chip>Open late</md-gb-chip>
</md-gb-chip-set>

Examples

Link to “Examples”

Assist chips

Link to “Assist chips”

Assist chips are smart or automated actions, such as adding an event to a calendar. They are the default type, can link with href, and can be elevated.

event Add to calendar open_in_new Guidelines 
<md-gb-chip-set aria-label="Event actions">
  <md-gb-chip>
    <md-gb-icon slot="icon">event</md-gb-icon>
    Add to calendar
  </md-gb-chip>
  <md-gb-chip href="https://m3.material.io/components/chips">
    <md-gb-icon slot="icon">open_in_new</md-gb-icon>
    Guidelines
  </md-gb-chip>
</md-gb-chip-set>

Filter chips

Link to “Filter chips”

Filter chips use tags or descriptive words to filter content and can replace toggle buttons or checkboxes. Set type="filter" and use selected for chosen ones.

Open now Price arrow_drop_down 
<md-gb-chip-set aria-label="Filters">
  <md-gb-chip type="filter" selected>Open now</md-gb-chip>
  <md-gb-chip type="filter">
    Price
    <md-gb-icon slot="trailing-icon">arrow_drop_down</md-gb-icon>
  </md-gb-chip>
</md-gb-chip-set>

Input chips

Link to “Input chips”

Input chips are discrete pieces of information a person entered, such as contacts. Set type="input"; add removable for a remove button and editable to let people edit the text. Icons and avatars go in the icon slot.

Hiking person Ada 
<md-gb-chip-set aria-label="Attendees">
  <md-gb-chip type="input" removable>Hiking</md-gb-chip>
  <md-gb-chip type="input" removable>
    <md-gb-icon slot="icon">person</md-gb-icon>
    Ada
  </md-gb-chip>
</md-gb-chip-set>

Suggestion chips

Link to “Suggestion chips”

Suggestion chips narrow a person's intent with dynamically generated suggestions, such as possible replies.

Sounds good See you then 
<md-gb-chip-set aria-label="Suggested replies">
  <md-gb-chip type="suggestion">Sounds good</md-gb-chip>
  <md-gb-chip type="suggestion" elevated>See you then</md-gb-chip>
</md-gb-chip-set>

Chip set

Link to “Chip set”

The chip set manages selection (selection="single" or "multiple") and arrow-key navigation, and wraps chips by default. With selection="single", add required so the selected chip can't be unselected, or single-line to scroll instead of wrap.

<h3 id="size-label">Size</h3>
<md-gb-chip-set aria-labelledby="size-label" selection="single" required>
  <md-gb-chip type="filter" selected>Small</md-gb-chip>
  <md-gb-chip type="filter">Medium</md-gb-chip>
  <md-gb-chip type="filter">Large</md-gb-chip>
</md-gb-chip-set>

Density

Link to “Density”

Set density on the chip set from 0 (default) to -3 to remove 4px of height per step.

Lunch Dinner 
<md-gb-chip-set aria-label="Compact filters" density="-2">
  <md-gb-chip type="filter">Lunch</md-gb-chip>
  <md-gb-chip type="filter">Dinner</md-gb-chip>
</md-gb-chip-set>

Disabled and soft-disabled

Link to “Disabled and soft-disabled”

A soft-disabled chip stays focusable so screen reader users can discover actions that are not available yet, such as Copy before text is selected.

Disabled Soft-disabled 
<md-gb-chip-set aria-label="Edit actions">
  <md-gb-chip disabled>Disabled</md-gb-chip>
  <md-gb-chip soft-disabled>Soft-disabled</md-gb-chip>
</md-gb-chip-set>

Accessibility

Link to “Accessibility”
  • A chip set is a grid of chips: label it with aria-label or aria-labelledby.
  • Add an aria-label to chips whose text needs to be more descriptive.
  • The set is one tab stop; arrow keys, Home and End move between chips, and Backspace or Delete removes a removable chip.
  • Disabled chips leave the focus order; use soft-disabled where discoverability matters, per the ARIA guidance on disabled controls.
<h3 id="dates-label">Dates</h3>
<md-gb-chip-set aria-labelledby="dates-label">
  <md-gb-chip aria-label="Monday" type="filter">Mon</md-gb-chip>
  <md-gb-chip aria-label="Tuesday" type="filter">Tue</md-gb-chip>
</md-gb-chip-set>

Compatibility

Link to “Compatibility”
Material Design 3Spec checked91% tokens

114 of 397 buildable spec units are tested, 21 are excluded with a written reason and 0 are uncovered (the target is 0). 121 of 133 token declarations match the spec (91%), and 12 have no spec token.

chips on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButtonGrid

Roles the component renders: button (opens in a new tab), grid (opens in a new tab), link (opens in a new tab), row (opens in a new tab), textbox (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab), Grid (opens in a new tab), Link (opens in a new tab).

6 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse98 · 94 · 100 · 100
  • Performance
  • Accessibility
  • Best practices
  • SEO

Audits under 90:

  • `[role]`s are not contained by their required parent element
  • Eliminate render-blocking resources
  • Minify JavaScript
  • Enable text compression
  • Network dependency tree
  • Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-chip>

Link to “<md-gb-chip>”

A Material Design Expressive Chip component.

Properties

Link to “Properties”
Property Attribute Type Default
color color ChipColor "flat"
density
The density, from 0 (default) to -3. Each step down removes 4px from the container height (32px); the label and icons keep their size and the touch target stays 48px (chips.md: "regardless of placement or density"). Values are clamped to that range. Density 0 inherits the density of an enclosing md-gb-chip-set. chips.md: don't apply density by default; let people opt in to a denser layout.		 density Density
disabled
Whether the chip is disabled.		 disabled boolean false
dragged
Whether the chip is being dragged (spec dragged state elevation).		 dragged boolean false
editable
Whether the text of an input chip can be edited (chips.md "Input chips": "Input chips can support editing to change their contents, such as correcting an email address"). Editing starts by interacting with the chip: a second click, Enter or Space on the selected chip, or a double click. Committing with Enter or by leaving the field changes the chip's text and fires edit; Escape (or emptying the text) keeps the old text.		 editable boolean false
elevated
Elevated container, for chips on images or complex backgrounds. Input chips have no elevated style.		 elevated boolean false
groupDisabled
Whether the chip's set is disabled (a disabled form fieldset).		 boolean false
href
The URL destination; makes an assist chip a link.		 href string ""
referrerPolicy
Sets the underlying HTMLAnchorElement's referrerpolicy attribute when href is set.		 referrerpolicy string ""
rel
Sets the underlying HTMLAnchorElement's rel attribute when href is set.		 rel string ""
removable
Whether the chip has a remove button (input chips).		 removable boolean false
removeLabel
The remove button's accessible label. Defaults to "Remove {chip label}" (spec: the remove action is labeled separately).		 remove-label string ""
selected
Whether the filter (or input) chip is selected.		 selected boolean false
softDisabled
Whether the chip is soft-disabled (aria-disabled="true" while preserving focusability).		 soft-disabled boolean false
target
Where to display the linked href URL for a link chip.		 target "" "_blank"
type
The chip type: assist (default), filter, input or suggestion.		 type ChipType "assist"
value
The value a chip set submits while the chip is selected. Defaults to the label text, like a native <option>.		 value string

Slots

Link to “Slots”
Slot Description
default The chip label text.
icon An optional leading icon, or an avatar (class="chip-avatar" or an <img>; input chips).
remove-icon The remove button icon when removable (default: the close symbol).
trailing-icon An optional trailing icon (filter chips, e.g. a drop-down arrow).

Events

Link to “Events”
Event Description
change
Event		 Fired when a filter chip's selection changes.
edit
CustomEvent		 Fired when an editable chip's new text is committed; detail has value and previousValue.
input
InputEvent		 Fired when a filter chip's selection changes.
remove
Event		 Fired when the remove button is activated, or Backspace / Delete is pressed on a removable chip.
update-focus
Event		 Fired when disabled changes, so a chip set can update its tab stop.

Methods

Link to “Methods”
Method Description
cancelEdit
() => void		 Ends editing and keeps the old text.
commitEdit
() => void		 Ends editing and applies the new text (empty or unchanged text keeps the old).
focus
(options?: FocusOptions & { trailing?: boolean; }) => void		 Focuses the chip's primary action, or its remove button with {trailing: true} (chip set navigation backwards into a chip).
startEdit
() => void		 Turns an editable input chip into a text string to edit. Does nothing for other chips.

CSS parts

Link to “CSS parts”
Part Description
::part(chip) The root container element.

CSS custom properties

Link to “CSS custom properties”
Property Description
--avatar-opacity
--avatar-shape
--avatar-size
--container-color
--container-elevation
--container-height Container height at density 0.
--container-shape
--density-step Container height removed per density step.
--icon-label-space
--label-text
--label-text-color
--leading-icon-color
--leading-icon-size
--leading-space
--outline-color
--outline-width
--target-size The minimum touch target size, kept at any density.
--trailing-icon-color
--trailing-icon-size
--trailing-space

<md-gb-chip-set>

Link to “<md-gb-chip-set>”

A Material Design Expressive chip set.

Properties

Link to “Properties”
Property Attribute Type Default
density
The density of the chips, from 0 (default) to -3: each step down removes 4px from the chips' height. A chip's own non-zero density wins. Values are clamped to that range.		 density Density
required
Single-select: the selected chip can't be unselected.		 required boolean false
selection
How many filter chips can be selected: none, single or multiple.		 selection SelectionMode "multiple"
singleLine
Keep the chips on one line and scroll horizontally instead of wrapping.		 single-line boolean false

Slots

Link to “Slots”
Slot Description
default The chips.

CSS custom properties

Link to “CSS custom properties”
Property Description
--chip-set-overflow-inset Room kept for touch targets and focus rings when a single-line set clips its overflow.
--chip-set-space The space between chips and between lines.
Install Material Web 3.0

Your browser did not offer to install the docs as an app. Install them from the browser instead:

Close Send feedback
Bug Documentation Idea

Opens a new GitHub issue for material-components/material-web in a new tab, with this filled in.

Cancel Open issue