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.

Input 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.

Specifications

There are two sizes of Chips:

  • By default, Chips should have a height of 30px, border radius 16px and a font size 13px
  • Smaller variant will have a height of 24px, border radius 16px and a font size 12px
ExampleHeight
Default 30px
Small 24px

Input chips can be in any of the following states:

SolidOutline
Default
Clifford
cancel
Jeff
cancel
Hover
Clifford
cancel
Jeff
cancel
Active
Clifford
cancel
Jeff
cancel
Error
Clifford
cancel
Jeff
cancel
Disabled
Clifford
cancel
Jeff
cancel

Choose Amenities
done
Elevator
Pets OK
Washer/Dryer
Pool
Free WiFi

Behaviors

  • Tap a chip to select it.
  • Multiple chips can be selected or unselected.

Accessibility

  • Use fieldset to create a checkbox group.
  • Chips need to be focusable and part of the tab sequence.
  • When the chip has focus, pressing the “Space” key selects it or activates an action.
What's Changed
DateVersionNotesContributors
11/23/20201.0.0Colors adjusted to be accessible.E. Gunther