Balance Logo
Reckon Design System


Chips allow users to select one or many options in a discrete interface, with the action taking effect immediately.
pnpm add @reckon-web/chips
Import usage
import {
} from '@reckon-web/chips';
  • Code
  • API


The Chips component is used for setting values within discrete interfaces. It is not to be used in forms, where actual checkbox and radio elements are required.

Single select

Select one option from many.

Open in Playroom

Multi select

The Chips component is unopinionated about how many options are selected, or how you manage selected options. Pass an array to the value prop to allow multi select behaviour.


To assign some meaning to the chips for assistive technologies, all instances of Chips should be labelled. There's a few ways you can achieve this, depending on your requirements.

Note: the examples below are not interactive, we're just focusing on accessibility.


The simplest way to label chips is with the existing Balance component FieldSet, which expects a legend property.



You may want to use another semantic element for the label. When taking this approach ensure that you pass the id reference onto the Chips using aria-labelledby.



For cases where the label can be determined through context by sighted users we must still label the Chips for assistive technologies with aria-label.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.