Chip
Chips are interactive elements consisting of a keyword or phrase that users can select among a series of given options. Chips allow adding information into a dropdown. Multiple chips can be selected at the same time and each can be dismissed individually.
Usage guidelines
When to use
Use in a dropdown input field to allow users to input pieces of information by selecting one or multiple options among the given ones.
When not to use
- As interactive elements with the purpose of filtering: use Selection Tag instead.
- To display non-interactive labels: use Tags instead
Writing guidelines
Length
Chips should always include a short label consisting of a single word or keyword phrase displayed in a single line of text.
Capitalization and case
Write headings in sentence case.
Specifications
Anatomy
- Chip container (or background): Contains the keyword and its color is predefined and depends on its state.
- Chip label: Provides a short keyword to describe the item.
- Close icon
Size
Chips come in one size. While the height is fixed at 20px, the width of each tag varies based on the amount of content.
All four corners of a selection tag are rounded with a 12px radius.
States
Chips' default color state is Zurich Blue . The color varies in the other four states (disabled, hover, pressed, focused) and it is predefined.
Behavior
Positioning
Chips are integrated in the dropdown input field. After being selected, they appear in the input field and can wrap to multiple rows. They should reflect the order in which they were selected by the user.
Alignment
Chips are left-aligned and when stacked, display between them an 8px horizontal pacing and a 12px vertical spacing. When a chip is removed from a group, the flow of the removal will move toward the left.
Interaction
Chips display five states of behavior: default, disabled, hover, pressed, focused.
Hover and press
To clear the selected values in a multi-selection input, simply select the close (X) icon on each individual chip displayed or deselect the item from the dropdown list.
Dismissed chips
In case of chip removal, make sure to provide a way to easily add it back.