@radix-ui/react-toggle-group

Single Selection Toggle Group

This feature allows for the creation of a group of toggle buttons where only one option can be selected at a time. It's useful for settings where an exclusive choice is required.

{"import { ToggleGroup, ToggleGroupItem } from '@radix-ui/react-toggle-group';\n\nfunction SingleSelectionToggleGroup() {\n  return (\n    <ToggleGroup type='single' aria-label='Text alignment'>\n      <ToggleGroupItem value='left' aria-label='Left aligned'>\n        Left\n      </ToggleGroupItem>\n      <ToggleGroupItem value='center' aria-label='Center aligned'>\n        Center\n      </ToggleGroupItem>\n      <ToggleGroupItem value='right' aria-label='Right aligned'>\n        Right\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}"}

Multiple Selection Toggle Group

This feature enables the creation of a toggle button group where multiple options can be selected simultaneously. It's ideal for settings where users may need to apply multiple attributes or filters at once.

{"import { ToggleGroup, ToggleGroupItem } from '@radix-ui/react-toggle-group';\n\nfunction MultipleSelectionToggleGroup() {\n  return (\n    <ToggleGroup type='multiple' aria-label='Text options'>\n      <ToggleGroupItem value='bold' aria-label='Bold'>\n        Bold\n      </ToggleGroupItem>\n      <ToggleGroupItem value='italic' aria-label='Italic'>\n        Italic\n      </ToggleGroupItem>\n      <ToggleGroupItem value='underline' aria-label='Underline'>\n        Underline\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}"}