Chip

When to use

• Use a chip when users need to interact with small, discrete options such as filtering content, entering removable values, or toggling selections

When not to use

• If you need to trigger a single action such as submitting a form or navigating to a new page, use a Button instead. Chips represent states or values, not actions.

Variant of chip

• Filter chip:  Use when users need to select from a predefined set of options to narrow displayed content
• Input chip:  Use to represent user-entered values that can be removed by selecting the chip
• Switch chip: Use to let users toggle an item on or off instantly

Content guidance

• Use nouns or adjectives that describe the thing being filtered, not verbs or action phrases. Chips represent categories, not actions
• Keep labels short and focused on a single value or a summary of a filter group. If a label needs more than three words, reconsider the taxonomy

How it works

Chips have four interaction states: default, hover, pressed, and selected. Unlike most components, chips show a distinct visual change during the press before committing to the selected state. Selected chips maintain their changed appearance until tapped again.

Accessibility

This component is designed with accessibility built in:

• aria-label is provided when the chip label alone does not give enough context
• Colour contrast meets 4.5:1 across all states including selected
• Touch target is at least 44x44px
• State change is not communicated through colour alone

When implementing, verify:

• aria-label is provided when the chip label alone does not give enough context
• Chip groups are wrapped in a container with an accessible group label so screen readers announce the purpose of the set.

Resources

• Figma
• Storybook