Design documented
Component Status
React documented
Flutter documented
Design
Up to date
React
Up to date
Flutter
Up to date
Introduction
Chips are a visual representation of a keyword or phrase that the user has used for purposes of filtering the scope of content displayed in the application interface at any given time.
When to use
Use chips when content is mapped to multiple categories, and the user needs a way to differentiate between them. Chips are typically used in our UI pages in the following scenarios:
- Filtering: When a UI page contains a list of items or data, chips can be used to represent different filters options. Users can select and remove chips to refine or change the content that's displayed according to their preferences.
- Multi-select: In forms or input fields, chips can be used to represent selected options. For example in a multi-select field, each selected option can be displayed as a chip, providing a clear overview of what's selected. Users can remove a selection by clicking on the chip.
