ToggleGroup

Grupo de toggles donde solo uno (o varios) pueden estar activos a la vez.

---

Import

import { ToggleGroup, ToggleGroupItem } from '@imansi/ui';

---

Uso básico (múltiple)

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Negrita">
    <Bold className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Itálica">
    <Italic className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Subrayado">
    <Underline className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

---

Single (uno a la vez)

<ToggleGroup type="single" defaultValue="centro">
  <ToggleGroupItem value="izquierda">Izquierda</ToggleGroupItem>
  <ToggleGroupItem value="centro">Centro</ToggleGroupItem>
  <ToggleGroupItem value="derecha">Derecha</ToggleGroupItem>
</ToggleGroup>

---

Controlado

const [alineacion, setAlineacion] = useState('centro');

<ToggleGroup
  type="single"
  value={alineacion}
  onValueChange={(v) => v && setAlineacion(v)}
>
  {/* items */}
</ToggleGroup>

---

Variantes y tamaños

<ToggleGroup type="single" variant="outline" size="sm">
  {/* items */}
</ToggleGroup>

---

Props

ToggleGroup

Prop	Tipo	Default	Descripción
type	'single' | 'multiple'	—	Modo de selección
value	string | string[]	—	Valor controlado
defaultValue	string | string[]	—	Valor inicial
onValueChange	(value) => void	—	Callback
variant	'default' | 'outline'	'default'	Estilo
size	'sm' | 'md' | 'lg'	'md'	Tamaño
disabled	boolean	false	Deshabilita el grupo

---

Accesibilidad

• Navegable con Tab y Flechas ← →
• role="group" con aria-label
• aria-pressed en cada item