Balance Logo
Balance
Reckon Design System

Chips

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

Usage

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.

Accessibility

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.

FieldSet

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

Flavours

Aria-labelledby

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.

Flavours

Aria-label

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.