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
Select one option from many.
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
You may want to use another semantic element for the label. When taking this
approach ensure that you pass the
id reference onto the
For cases where the label can be determined through context by sighted users we
must still label the
Chips for assistive technologies with