Guidelines
When to use
- Forms: Chips represent selected options in forms, like in the Multiselect. Each selected item appears as a Chip, providing a clear summary of user choices.
- Search keywords: Use Chips to display keywords searched by users on pages with datasets, like tables.
When not to use
- Non-selectable or non-removable content: Don’t use Chips for purely informational content that doesn’t need to be selected or removed. Consider using simple text labels or Tags.
- Filters: To represent active filters, use the dedicated Filter Chip component instead of generic Chips. Filter Chips are specifically designed to represent selected filters.
Chips vs. Tags
- Chips: Chips are mainly interactive components that allow users to take actions like selecting or removing content. They are used when users need to interact with the content, such as making choices or managing selected items.
- Tags: Tags are non-interactive elements designed for labeling or categorizing information. They serve purely informational purposes and do not require any user action.
Behaviors
Close button
Chips have a Close button by default, allowing users to easily select or remove content, which is their core functionality.
Exception: In the Multiselect component, the overflow indicator is represented by a static Chip without a Close button.
Mouse interactions
Clicking the Close button removes it from the page.
Content
Chips typically display user inputted data or information pulled from somewhere else. They do not require any content to be created specifically for them. In the case that they do require content, keep it short and clear. Try to limit content to 20 characters (3 words or less).
Filter labels should describe the nature of a filter set while taking into account the limited available space. Content for the filter labels should avoid articles to save space.
Tone
- Be clear and concise: Ensure the Chip content is clear and concise to avoid confusion.
- Keep it simple: Avoid using articles so that users can quickly identify the Chip’s function.