Chip

Owned by Matt Birtch
Last updated: Dec 02, 2021
1 min read

Design Complete

Important Links

Figma Design Component

UI Platform Storybook Link (Coming Soon)

Compass Design System Documentation

Description

Input Chips are used when selections are made and added to an input field. Chips have the ability to be removed from the input field by clicking the 'x' icon within the Chip. In the apps framework, Chips are mainly used in conjunction with the Multi-Select Input component.

Anatomy

The Text input is made up of the following elements:

  • Supporting Visual (optional)

  • Text

  • Trailing Icon

  • Container

 

See the Compass Design System documentation for full details on this component

Supported Canvases

  • Modal Canvas

  • RHS Canvas

  • Message Canvas

Sample Use in the App Framework

 

 

Â