Chips
Compact elements used to filter content or display user input.
Chips are compact, interactive elements that represent an input or option. They often appear in groups helping users filter content, enter data, or complete tasks efficiently.
Also known as: Pills, tags, lozenges, selectable tag, dismissible tag.
Anatomy
A. Label (required): Brief text describing the chip.
B. Avatar (optional): Thumbnail image or logo representing users or entities.
C. Leading icon (optional): Icon used to represent the chip.
D. Clear button (required): Button used to deselect removable chips.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Selection | To enable users to filter content by selecting from a set of pre-determined chips. If there’s sufficient space to display all the available selection chips at once. | If there is only one option. Consider using a Default checkbox instead. |
| Removable | To provide a visual representation of options selected from a checkbox group or multiselect component. For more complex filtering scenarios where only the selected options should be displayed in chips. | If the list of options is brief or simple and it would be easier to select and deselct chips directly. |
Best practices
- Maintain consistent spacing and margins between chips to enhance readability and visual consistency. Reference Scaling and reflow for more guidance.
- Organize chips into logical groups to help users understand relationships between options or categories.
Selection chips
Selection chips enable users to make choices by manually selecting a chip from a set or group. They can be used to filter content or indicate selected items. Selection chips are similar to checkboxes or toggle components, where clicking the chip selects it, and clicking it again deselects it.
- Clearly indicate when a chip is selected using color, a checkmark, or another visual indicator.
- Display all selection chips at once, including those that have been deselected.
Removable chips
Removable chips represent selections by appearing once the user has selected an item from a checkbox group, multiselect component, or set of filters. They show brief information about each selection and provide an easy way for users to remove individual items. These chips provide a visual representation of items the user has selected, but aren’t selectable themselves.
- Always provide a clear button to remove chips.
- Always hide chip options after removal.
- Consider asking for confirmation before removal if the chip removal has significant impact.
Removable chip size
Removable chips come in two sizes depending on their location, standard and compact. For both sizes, selecting the clear button will remove the chip.
Standard
Standard-sized chips appear outside of components and display options or filters that have been applied by the user.
- Arrange chips in a logical order, such as by order of selection or alphabetically.
Compact
Compact chips appear inside components like input fields or comboboxes after user selection or input.
- Keep chip labels concise to maintain readability and prevent truncation.
Behaviors
Chips have various behaviors designed to enhance user interaction and functionality. This section provides guidance on the the expected behaviors of the chip variants, selection and removable chips.
Selection chips
Selection chips toggle between selected and deselected stated when clicked by the user.
Do Display all selection chips at once, using clear visual indicators to show which are selected.
Don't Hide selection chips when they are deselected.
Removable chips
Removable chips allow the user to perform one action on the chip, usually removing the settings from the list.
Do Ensure users can remove chips using the clear button.
Don't Include multiple action buttons in a removable chip.
Scaling and reflow
Scaling and reflow refers to how content behaves as the container size changes, particularly when the container is too small to display all content at once. This describes the behavior of chips as their number increases and they wrap in a container and how individual chips behave when their content is too long.
- Display chip labels fully when possible.
- Maintain consistent spacing between chips during reflow.
- Keep chip labels concise to maintain readability and prevent truncation.
Do Allow chips to reflow within responsive containers to ensure the full labels are visible.
Don't Truncate chip information or display it in a surface that doesn’t allow for content to reflow.
Content
- Use clear, concise text to label chips.
- Use sentence case, except for proper nouns or acronyms.
- Use simple language - avoid abbreviations or jargon.
- Don’t include punctuation in chip labels.
- Limit chip labels to a 20-character maximum.
