Chip

Material Design 3 chip for compact actions, filters, and inputs. Not intended for long-form text entry or multi-step workflows.

Basic Usage

Use chips to represent a small action or attribute. Chips provide quick inline interaction without requiring larger controls. 

<ds-chip label="Add item" icon="add"></ds-chip>

Variants

Choose the chip variant that matches the task.

Assist

Use for quick actions or shortcuts.

<ds-chip label="Assist chip"></ds-chip>
<ds-chip label="With icon" icon="add"></ds-chip>
<ds-chip label="Elevated" elevated></ds-chip>

Filter

Use for multi-select filtering.

<ds-chip variant="filter" label="Unselected"></ds-chip>
<ds-chip variant="filter" label="Selected" selected></ds-chip>
<ds-chip variant="filter" label="With icon" icon="filter_list" selected></ds-chip>

Input

Use for removable entries like tags or recipients.

<ds-chip variant="input" label="Tag 1"></ds-chip>
<ds-chip variant="input" label="Tag 2"></ds-chip>
<ds-chip variant="input" label="With icon" icon="label"></ds-chip>

Suggestion

Use for contextual or AI-suggested responses.

Sarah • 2 min ago
Hey! Are you free for coffee tomorrow at 3pm?
Quick replies
<ds-chip variant="suggestion" label="Yes, sounds good!"></ds-chip>
<ds-chip variant="suggestion" label="Can we do 4pm instead?"></ds-chip>
<ds-chip variant="suggestion" label="Let me check my calendar"></ds-chip>
<ds-chip variant="suggestion" label="Sorry, I'm busy"></ds-chip>

States

Use disabled to prevent interaction.

Disabled

<ds-chip label="Disabled assist" disabled></ds-chip>
<ds-chip variant="filter" label="Disabled filter" disabled></ds-chip>
<ds-chip variant="filter" label="Disabled selected" selected disabled></ds-chip>
<ds-chip variant="input" label="Disabled input" disabled></ds-chip>

API

Attributes

Attribute Type Default Description
variant string "assist" Type of chip: "assist", "filter", "input", or "suggestion"
label string "" Text label displayed on the chip
icon string "" Material Symbol icon name
avatar string "" Avatar image URL
selected boolean false Whether the chip is selected (filter chips)
disabled boolean false Whether the chip is disabled
elevated boolean false Whether the chip has elevation (shadow)

Properties

Property Type Description
variant string Get/set the chip variant
selected boolean Get/set the selected state (filter chips)
disabled boolean Get/set the disabled state
elevated boolean Get/set the elevated state

Events

Event Detail Description
ds-chip:click { variant, selected, label } Fired when the chip is clicked
ds-chip:remove { label } Fired when the remove button is clicked (input chips)

CSS Parts

Part Description
None No exposed parts

CSS Custom Properties

Property Description
--ds-chip-height Chip height (defaults to global control size)
--ds-chip-padding-x Horizontal padding inside the chip
--ds-chip-icon-size Leading icon and checkmark size
--ds-chip-avatar-size Avatar size
--ds-chip-remove-size Remove button icon size

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab Chip set Moves focus between chips and remove buttons
Enter / Space Focus on chip Activates chip or toggles filter state
Delete / Backspace Focus on input chip Removes the chip when removable behavior is enabled

Semantics

  • Filter chips use role="checkbox" with aria-checked.
  • Other variants use role="button" and expose aria-disabled when disabled.
  • Remove affordances include accessible labels.

Interactive Examples

Filter Chips

Select categories:

Input Chips

Manage tags:

Usage Guidelines

  • When to use: Use assist chips for quick actions, filter chips for multi-select filtering, input chips for removable entities, and suggestion chips for contextual replies.
  • When not to use: Avoid chips for long labels, deeply nested actions, or controls that require extensive helper text.
  • Composition: Keep labels concise, group related chips, and use icons only when they improve recognition.
  • Common mistakes: Mixing too many variants in one cluster reduces clarity and increases cognitive load.