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>
)}
() => {
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>
)}
() => {
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>
)}
() => {
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.