Chip

A Chip is a compact, interactive element that represents a selection or applied filter. Chips help users quickly understand selected criteria and provide a way to remove or interact with them without navigating away from the current view.

Maturity level - under review, subject to change - use with caution

View the React component implementation details and all variants in Storybook.

Component examples

About this component

Chips are small UI elements used to represent applied filters or selections in a compact and easily readable format. In clinical applications, chips often appear below data grid toolbar or filters, showing active selections made by the user, such as specific conditions, patient cohorts, or date ranges.

Chips include a label and a close icon action that let users remove the chip. They should be visually distinct but not distracting, and fit within dense, data-driven layouts.

Guidance

When to use the Chip component

Use chips when:

  • Displaying applied filters or selections, especially in a toolbar or filter summary.
  • Allowing users to remove a filter or selection in a simple, non-disruptive way.
  • Summarizing selected options in a compact format.

Chips are especially useful in tables or data grids where the user needs persistent visibility of applied filters.

When to consider something else

Avoid using chips when:

  • The selection is fixed and not meant to be updated (use a tag).
  • You need to display long text strings or detailed information (use a tag or label component instead).
  • You need to draw attention or categorize content elements (use a tag).

Usability guidance

  • Label clarity. Keep chip labels concise and descriptive. Use sentence case (e.g., “High risk patients”).
  • Dismissibility. Clicking the close icon (X) will remove the chip and should automatically update the view to reflect the changes.
  • Spacing. Ensure adequate spacing between chips. Chips should wrap to a new line if they exceed the available width.

Accessibility

  • Readable label formatting. Avoid using ALL CAPS for chip labels. Use sentence case or title case to improve readability. Screen readers may interpret all-uppercase text as individual letters, which can reduce comprehension.
  • Keyboard navigation. Tab navigation and activation of the close icon using Enter or Space are built into the component. Avoid manually setting tabindex or overriding native focus behavior, as doing so may disrupt expected accessibility support and keyboard interactions.