Chips

Anatomy

┌── Standard Chip ──────────────────┐   ┌── Closable Chip ─────────────────┐
│  Label text                        │   │  Label text   ✕                  │
└───────────────────────────────────┘   └──────────────────────────────────┘

Standard Chips

1. Container — Pill-shaped border, radius supports Full / Default
2. Label — Short text, recommended ≤ 3 words

Closable Chips

1. Container — Pill-shaped border
2. Label — Name of the selected item
3. Close Button — ✕ icon, touch target ≥ 24 px

Usage Guidelines

✅ Do

• Use Standard Chips for filtering (multi-select); keep labels short (≤ 3 words)
• Use Closable Chips to display the collection of selected tags for individual removal
• Arrange chip groups horizontally, wrapping when they exceed width
• Keep close button touch targets ≥ 24 px for mobile usability

❌ Don't

• Don't use Chips as navigation elements — use Tabs instead
• Don't put excessively long text in chips — overflow will be truncated
• Don't use Chips for single-select scenarios — use Radio instead
• Don't mix Standard and Closable types within the same chip group

Interaction Behavior

Accessibility