Default
The <ChoiceChips /> component renders a group of <ChoiceChipsOption /> children, and provides an onChange handler to manage state.
Editable example() => {
const [value, setValue] = React.useState("docs")
return (
<ChoiceChips value={value} label="Choose an option" onChange={(selected) => setValue(selected)}>
<ChoiceChipsOption label="Documents" value="docs" />
<ChoiceChipsOption label="Images & Video" value="image-video" />
<ChoiceChipsOption label="Presentations" value="presentations" />
</ChoiceChips>
)}
Best practices
Functionally, ChoiceChips are similar to SegmentedControl. Use ChoiceChips when you have a larger number of options to select from that all need to be visible at once, and SegmentedControl when you have fewer options that should all display on a single line.
Add a label
By default the label is visually hidden. To show the label, add the prop labelHidden={false}.
Editable example() => {
const [value, setValue] = React.useState("docs")
return (
<ChoiceChips value={value} label="Choose an option:" labelHidden={false} onChange={(selected) => setValue(selected)}>
<ChoiceChipsOption label="Documents" value="docs" />
<ChoiceChipsOption label="Images & Video" value="image-video" />
<ChoiceChipsOption label="Presentations" value="presentations" />
</ChoiceChips>
)}
Alignment
This component can be left or center aligned. Use the align prop to specify which alignment to use.
Editable example() => {
const [value, setValue] = React.useState("docs")
return (
<ChoiceChips align="left" value={value} label="Choose an option:" labelHidden={false} onChange={(selected) => setValue(selected)}>
<ChoiceChipsOption label="Documents" value="docs" />
<ChoiceChipsOption label="Images & Video" value="image-video" />
<ChoiceChipsOption label="Presentations" value="presentations" />
</ChoiceChips>
)}
Accessibility
Always provide a meaningful label that describes the choices. Even when the label is hidden it is used by screen readers to provide context about the options.