Toggle Group

import { Bold, Italic, Underline } from "lucide-react"
 
import * as ToggleGroup from "@/registry/radix-ui/ui/toggle-group"
 
export function ToggleGroupExample() {
  const [format, setFormat] = React.useState("bold")
 
  return (
    <ToggleGroup.Root
      type="single"
      value={format}
      onValueChange={(value) => value && setFormat(value)}
      variant="primary"
      appearance="outline"
    >
      <ToggleGroup.Item value="bold">
        <Bold className="size-4" />
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic">
        <Italic className="size-4" />
        Italic
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline">
        <Underline className="size-4" />
        Underline
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}