Chapter 2 — Components · Section 07
Selection Chips
M3 Filter Chip pattern — unselected shows an outline with neutral text; selected fills with the chosen color container. All four brand colors are available. State is communicated through both the leading checkmark icon and the background — never color alone.
Interactive Demo
Click to toggle — try multiple selections. This is the default secondary-container style.
Color Variants
Each variant uses its container token for the selected state — all locked pairs, all AAA contrast.
Primary
Secondary
Tertiary
Neutral
Multi-Group Filter Panel
Different filter groups use different colors so users can instantly distinguish filter categories.
Status
Subject
Level
Format
Counter Badge Variant
Read-only · shows count inside chip
Size Variants
Small
Medium (default)
Large
State Reference — All Colors
| Color | Unselected | Hover | Selected | Disabled |
|---|---|---|---|---|
| primary | Label | Label | Label | Label |
| secondary | Label | Label | Label | Label |
| tertiary | Label | Label | Label | Label |
| neutral | Label | Label | Label | Label |
Accessibility
Filter chips use role="checkbox" with aria-checked kept in sync with visual state. The leading checkmark icon communicates selection independently of color — WCAG 1.4.1 requires that color not be the only means of conveying information. Group chips in a role="group" with an aria-label describing the filter category. Different color families for different filter groups also improves scanability for users with low vision.