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.

<img class=“img-fluid bg-light border border-light” width=“400” height=“213” src="/img/guide/elements–chips-example.png" alt=“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
Example Height
Default 30px
Small 24px

Input chips can be in any of the following states:

Solid Outline
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
Date Version Notes Contributors
11/23/2020 1.0.0 Colors adjusted to be accessible. E. Gunther