Chip

Chips allow users to enter information, make choices, filter options, and take actions.

Component Status

Design documented

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:

  1. 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.
  2. 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.
null