One choice and several

// apps/docs/examples/ui/toggle-group.tsx'use client';
import {useState} from 'react';import {  AlignCenterIcon,  AlignLeftIcon,  AlignRightIcon,  BoldIcon,  ItalicIcon,  UnderlineIcon,} from 'lucide-react';
import {  ToggleGroup,  ToggleGroupItem,} from '@workspace/active-ui/components/primitives/toggle-group';
/** * Toggles that share one value. By default one item at a time is pressed * (alignment); with `multiple` any number (text style). The value is always * an array of the `value`s of the pressed items. `spacing={0}` joins the * items into one outlined control. */export default function ToggleGroupExample() {  const [align, setAlign] = useState<string[]>(['left']);  const [style, setStyle] = useState<string[]>(['bold']);  return (    <div className="flex flex-col items-start gap-6">      <div className="flex flex-col gap-2">        <ToggleGroup          aria-label="Alignment"          variant="outline"          spacing={0}          value={align}          onValueChange={setAlign}        >          <ToggleGroupItem value="left" aria-label="Align left">            <AlignLeftIcon aria-hidden />          </ToggleGroupItem>          <ToggleGroupItem value="center" aria-label="Align center">            <AlignCenterIcon aria-hidden />          </ToggleGroupItem>          <ToggleGroupItem value="right" aria-label="Align right">            <AlignRightIcon aria-hidden />          </ToggleGroupItem>        </ToggleGroup>        <p className="text-muted-foreground text-sm">          Value: <code>{JSON.stringify(align)}</code>        </p>      </div>      <div className="flex flex-col gap-2">        <ToggleGroup          aria-label="Text style"          multiple          value={style}          onValueChange={setStyle}        >          <ToggleGroupItem value="bold" aria-label="Bold">            <BoldIcon aria-hidden />          </ToggleGroupItem>          <ToggleGroupItem value="italic" aria-label="Italic">            <ItalicIcon aria-hidden />          </ToggleGroupItem>          <ToggleGroupItem value="underline" aria-label="Underline">            <UnderlineIcon aria-hidden />          </ToggleGroupItem>        </ToggleGroup>        <p className="text-muted-foreground text-sm">          Value: <code>{JSON.stringify(style)}</code>        </p>      </div>    </div>  );}