Toggle Group

import { ToggleGroup, ToggleGroupItem } from "@craftdotui/baseui/components/toggle-group";

<ToggleGroup>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";

<ToggleGroup type="single">
  <ToggleGroupItem value="left" size="icon">
    <AlignLeft />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" size="icon">
    <AlignCenter />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" size="icon">
    <AlignRight />
  </ToggleGroupItem>
</ToggleGroup>

import { Bold, Italic, Underline } from "lucide-react";

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" size="icon">
    <Bold />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" size="icon">
    <Italic />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" size="icon">
    <Underline />
  </ToggleGroupItem>
</ToggleGroup>

<ToggleGroup variant="outline">
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
  <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
</ToggleGroup>

<ToggleGroup orientation="vertical">
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
</ToggleGroup>

const [value, setValue] = useState('center');

<ToggleGroup value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>