Change log
Components
Chip
- Overview
- Usage
Overview
When to use
Chips are used to show added items within a form, make selections, or filter content.
When not to use
Don't use chips to display static information, use badges instead.
Variants
Selection chips
Selection chips can be used to make selections or create filters. Chip can be selected or unselected by clicking on it. The use of an icon is optional.
Usage example:
Input chips
Input chips display the user's choice in a filter, an input field or a select box. An input chip can be removed from a group of chips by clicking on the X icon.
Usage examples:
Size
Chips come in three different sizes: large, medium and small. Do not use different sizes in a group.
Icons
Icons can be used in large and medium chips.
Labels
Chip titles should describe the chip in a few words and be under 20 characters when possible.
When the chip's title is too long to fit within the available space of the tag container, the title can be truncated with an ellipsis. The full title is disclosed in a tooltip on hover when using a mouse and on focus when using a keyboard.
Grouping
A group of chips should flow like words in a paragraph, not a vertical list. This keeps the group compact to improve scannability.
Within a select box or input field
There are two ways to display chips within a form field. If there are less than 10 options and the text labels are short, the height of the for field can be expanded to fit all the selected options.
If there are more than 10 options and the text labels are longer, it is recommended to show only first few selections and a text label (e.g. +4) to indicate the amount of hidden chips.
Usage guidelines
Labels
Truncate labels that are longer than 20 characters and do not wrap text on multiple lines.
Do
Don't
Size
Do not use different sizes in a group.
Do
Don't
The chip will automatically size itself to fit the content. Do not change the width of the chip.
Do
Don't
Icons
Do not use icons without a label.
Do
Don't