Chips
Chips help people enter information, make selections, filter content, or trigger actions. Material Design 3 defines four types: assist, filter, input, and suggestion chips.
Live Preview
Filter Chips
Input Chips
SaffronTurmericSandalwoodRose
Suggestion Chips
Assist Chips
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| container.height | dimension | 32px | 32px | 32px |
| container.borderRadius | dimension | 8px | 8px | 8px |
| container.paddingHorizontal | dimension | 16px | 16px | 16px |
| container.gap | dimension | 8px | 8px | 8px |
| label.textStyle | typography | Label Large | 14px / 500 | 14px / 500 |
| filter.selectedContainerColor | color | #E8DEF8 | #038012 20% | #1A5129 20% |
| filter.selectedLabelColor | color | #6750A4 | #038012 | #1A5129 |
| unselected.containerColor | color | transparent | transparent | transparent |
| unselected.outlineColor | color | #79747E | #79747E | #79747E |
| unselected.labelColor | color | #49454F | #49454F | #49454F |
| input.containerColor | color | #E7E0EC | #E7E0EC | #E7E0EC |
| icon.size | dimension | 18px | 18px | 18px |
Chip Types
Filter Chips
Allow users to filter content. Can have multiple selections.
Input Chips
Represent user-entered data. Include a remove action.
Suggestion Chips
Offer dynamic suggestions to help users complete tasks.
Assist Chips
Trigger smart or automated actions with leading icons.
Usage Guidelines
- Use filter chips when users can select multiple options from a set
- Use input chips to display user-entered information like tags or ingredients
- Use suggestion chips to present contextual recommendations
- Use assist chips to offer related actions with descriptive icons
- Keep chip labels concise - aim for 1-2 words when possible