Skip to main content

Chips

Chips represent small blocks of information and are commonly used for input or filtering.

Overview

Chips represent a complex piece of information in a compact form, such as an entity (person, place, or thing) or text. They allow users to enter information, make selections, filter content, or trigger actions. Unlike buttons, chips should appear dynamically as a group of multiple interactive elements.

Chips example

Usage

Use when

  • Enabling and verifying user input.
  • Using tags or descriptive words to filter content.
  • Delineating and displaying options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Don’t use when

  • There is only one option.
What's changed
Date Version Notes Contributors
11/23/2020 1.0.0 Colors adjusted to be accessible. E. Gunther