Chip

Chips display user selections or search terms.

What the component handles

  • Screen reader announcements for disabled state
  • Screen reader announcements for error state
  • Meets minimum touch target size requirements
  • Close button is appropriately labeled with Chip text for screen readers

What you need to provide

  • errorId prop to link chip with error message element when in error state

Color contrast

Since the Chip’s background is not necessary to determine the component’s hit area, there is no contrast requirement beyond the 4.5:1 text and 3:1 icon contrast, which is ensured.