Chip

Communicate purpose

Chips are flexible components that can be used to show a drop-down list, open a model or show a bottom sheet, which can be designed for either selecting one or multiple items at once. Annotate the design so it’s clear what the action or purpose is for development.

Support dynamic changes

Assistive technology users need to be updated when something visually changes on screen. For example, we must make it clear when a user removes a dismissible chip, or if a chip filters out some content, then the new total should be announced.

Preferably show the updated total visually to avoid extra cognitive effort and to update the user instantly.

Disabled chips

Although disabled chips don’t need to pass minimum contrast checks, they’re still difficult to read until they are enabled. Consider whether missing the information harms the experience, and look at other solutions if so.

Focus order on dismiss

After dismissing a chip, it may be unclear where the focus should move. Work with the engineer to make sure the experience matches the expectations. It’s recommended that the focus shifts to the next element on the page but judge the experience for each case.