Chip

In general, use a chip when you want to filter information on a page or indicate that a user made a selection.

Although these elements look very similar, the following guidance should help clarify when to use each.

There should be at least two chips in every chip group.

The Large size chip group works well in areas that have more space like page layouts. The Small size chip group works well in compact areas like components or UI.

When ordering chips in a chip group, use a logical order like alphabetical, numerical, etc. The Clear all button should always be last.

Chip text displays exactly what is being filtered without truncation. This means that chip text has the potential to be very long.

To see chip interaction states, go to the Style page.

The entire container of a chip is clickable except if a chip is disabled.

There should not be any chips selected when the page loads. A user can select only one chip at a time.

The Clear all button is always present and is always the last chip in the chip group order. When selected, all chips return to the Default state. However, it has no impact on disabled chips.

Chips in a chip group will shuffle and break to multiple lines as screen sizes get smaller.

If a chip has a long string of text, it will break to two lines inside of the chip container.

Use a consistent chip size in every chip group.

Do not mix chip sizes in any chip group.

Use at least two chips and the Clear all button in a chip group.

Do not use one chip and no Clear all button in a chip group. Use a Button or Link instead if needed.

Always include the Clear all button even if no chips are selected.

Do not omit the Clear all button otherwise users cannot clear chip selections they have made.

Use the selected state icons consistently.

Do not change the selected state icon, its styling, or its position.