Chips

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.

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.

Types

Common types include Input and Filter Chips. They are available in both solid and outline variants.

Input Chips (Solid)

Input Chips (Outlined)

Filter Chips (Solid)

Input chips display information used in fields, such as an entity or different attributes.

Filter Chips (Outlined)

Input chips display information used in fields, such as an entity or different attributes.