Overview

Chip

Chips allow users to select or filter items based on their descriptive tags. They support both single-select and multi-select scenarios.

Chip

Usage

When to use
Chips offer a lightweight and easy way for users to choose one or more items from a list. They feature less content and take up less space compared to radios or checkboxes, as they're placed horizontally. Use them for selecting product options, filtering content, or setting timeframe. Users add or remove chips by selecting and unselecting.
Single-selection chip
A compact alternative to radio buttons, users can choose one item among a set of at least 2 options.
Multiple-selection chip
A compact alternative to checkboxes, multiple-selection chips filter content in a list. Users can select one or more chips.
How best to use
Do
Keep the number of chips at a reasonable limit — 2 to 9 chips work best, depending on the context and content represented.
Don't
Don't use a single chip on its own. Use at least 2.
Caution
Include a default option only if it's the most desired or frequently used. Similar to radio buttons, don't use a default if it might be leading, presumptive, or affect data accuracy.
When not to use
Don't use chips to label the attributes of a component
If you need to categorise a single object or describe its attribute, use a tag instead.
Don't use as a replacement for buttons
Chips are for making selections, not call to actions.
Component comparison table
Component
Usage
Number of options
Checkbox
Use for selecting one or more options out of a list of independent, always visible options.
Commonly used for one to 6 options. If you have many options, consider organising them into subsections for easy reading.
Radio
Use for selecting one option out of a list of mutually exclusive, always visible options.
Commonly used for 2 to 6 options. Unsuitable for too many options.
Chip
Use when selecting one or more short options, stacked horizontally.
Commonly used for at least 2 and up to 9 options.
Switch
Use for toggling between 2 opposing states like a digital switch. Best for adjusting settings.
For 2 built-in, opposing options.
Dropdown
Use when selecting one or more options out of a list that expands when users interact with it.
When there's one or more options. Commonly used for scenarios with more than 6 options.