Example: PLP — filter sidebar + Card product grid
Use Standard Chips for filtering (multi-select); keep labels short (≤ 3 words)
Don't use Chips as navigation elements — use Tabs instead
Use Closable Chips to display selected tags for individual removal; keep close button touch targets ≥ 24 px
Don't use Chips for single-select scenarios — use Radio instead
| State | Description |
|---|---|
| Default | Light gray background + border, text color text-secondary |
| Hover | Background slightly darkens |
| Selected (Standard) | default style: black fill; brand style: brand-pink fill, white text |
| Disabled | Gray fill, pointer-events: none |
| Close Button Hover | Close icon opacity increases, indicating clickability |
| Requirement | Implementation |
|---|---|
| Filter chips | role="checkbox" + aria-checked indicating selected state |
| Closable chip container | role="group" + aria-label="Selected: {chip name}" |
| Close button | aria-label="Remove {chip name}" |
| Chip group | role="group" + aria-label describing the group purpose |
| Keyboard navigation | Tab to enter chip, Space/Enter to toggle selection |