Toggle Group

Edit the code — the preview updates live. Try changing props, text, or classes.

render(
  <ToggleGroup type="single" defaultValue="center">
    <ToggleGroupItem value="left" aria-label="Left">L</ToggleGroupItem>
    <ToggleGroupItem value="center" aria-label="Center">C</ToggleGroupItem>
    <ToggleGroupItem value="right" aria-label="Right">R</ToggleGroupItem>
  </ToggleGroup>
)

Common variations — edit any of them live.

render(
  <ToggleGroup type="multiple" defaultValue={["bold"]}>
    <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
    <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
    <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
  </ToggleGroup>
)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import ToggleGroup from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.