Buttons

Toggle Group

A set of toggles, single or multiple.

Import

tsx

import { ToggleGroup } from "@cronus-ui/ui";

bash

npx cronus-ui add toggle-group

Examples

Single

With `type="single"` exactly one item is selected at a time — ideal for text alignment.

tsx

const [align, setAlign] = useState("left");

return (
  <ToggleGroup
    type="single"
    value={align}
    onValueChange={(value) => {
      if (value) setAlign(value);
    }}
  >
    <ToggleGroupItem value="left" aria-label="Align left">
      <AlignLeft />
    </ToggleGroupItem>
    <ToggleGroupItem value="center" aria-label="Align center">
      <AlignCenter />
    </ToggleGroupItem>
    <ToggleGroupItem value="right" aria-label="Align right">
      <AlignRight />
    </ToggleGroupItem>
  </ToggleGroup>
);

Multiple

With `type="multiple"` any number of items can be active — perfect for text formatting.

tsx

const [formats, setFormats] = useState<string[]>(["bold"]);

return (
  <ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
    <ToggleGroupItem value="bold" aria-label="Bold">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" aria-label="Italic">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" aria-label="Underline">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
);