Toggle Group

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