Introduction
Chips offer the user to perform an action – such as selecting, filtering or inputting information – related to the primary content. They offer additional context and enable the user to make selections with a single click. Chips usually are presented in a group in relationship to the content or task provided.
- Chips are an interactive element to help the user select or filter content
- Chips usually come in groups related to the content provided
Single vs Multi-Select
Chips can be used as either a single select [radio button] or as a multi-select [checkbox]. A single select chips group can only have one selected chip, while a multi-select can have multipe selected chips. Each selected chip in a multi-select group needs to display the deselect x-icon and, additionally, the option to select or deselect all at once.
Single Select Group
Multi Select Group
Usage
Use chips when the user can select multiple options. Display multiple chips in a group.
Avoid using chips when there is only a single option that can be selected.
Help the user to avoid unnecessary clicks by providing a “clear all” button to deselect all selected chips.
Avoid making the user deselect all chips manually.
In some instances, chips need to disabled. Keep the number of disabled chips to a maximum of two.
If there are a greater number of disabled chips, opt to hide the chips.
Use descriptive and clear labels and group together related content.
Don't group together chips with unrelated in content.
Hug the content of the chips to save space.
Chips are meant to be space efficient elements. Don't display chips full width.
Mobile Usage
Also known as
Tags, Filter Chips, Filter Selects