Chips

actions

Chips help people enter information, make selections, filter content, or trigger actions. They are compact elements representing inputs, attributes, or actions.

Variants

Assist

Default

Represent smart or automated actions

Filter

Allow selection to filter content

Input

Represent user-provided information

Suggestion

Offer dynamically generated suggestions

Properties

Name Type Required Default Description
variant enum - assist Type of chip
label string Yes - The chip text label
disabled boolean - - Whether the chip is disabled
elevated boolean - - Apply elevated styling with shadow
selected boolean - - Whether a filter chip is selected
removable boolean - - Show remove button for input chips
href string - - Make chip a link

States

enabled

Default interactive state

selected

Filter chip selected state

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: button (action chips), checkbox (filter chips)
Keyboard Support:
  • Enter/Space - Activate chip or toggle selection
  • Delete/Backspace - Remove input chip
  • Tab - Move focus between chips
Screen Reader Notes: Chips should announce their label and state. Filter chips use aria-pressed for selected state.

LLM Context

Intent: Provide compact interactive elements for actions, selections, or inputs
Anti-Patterns:
  • Chip without label text
  • Too many chips making content overwhelming
  • Using chips for primary actions
  • Filter chips without aria-pressed
Example Usage: 
<md-assist-chip label="Add to calendar"><md-icon slot="icon">event</md-icon></md-assist-chip>
<md-filter-chip label="Vegetarian" selected></md-filter-chip>
<md-input-chip label="john@example.com" removable></md-input-chip>
<md-suggestion-chip label="Try this"></md-suggestion-chip>