# ToggleGroup

> Varios Toggle juntos, en modo «uno» o «varios».

```tsx
import { ToggleGroup, ToggleGroupItem } from "sebs7n-ui/toggle-group"
```

## Ejemplos

### Uno de varios

El grupo entero es una sola parada de tabulación; adentro se recorre con las flechas.

```tsx
import { ToggleGroup, ToggleGroupItem } from "sebs7n-ui/toggle-group"
import { useState } from "react"

function Basico() {
  const [vista, setVista] = useState<string[]>(["tabla"])
  return (
    <ToggleGroup aria-label="Vista" onValueChange={(value) => value[0] && setVista(value as string[])} value={vista}>
      <ToggleGroupItem value="tabla">Tabla</ToggleGroupItem>
      <ToggleGroupItem value="tarjetas">Tarjetas</ToggleGroupItem>
      <ToggleGroupItem value="calendario">Calendario</ToggleGroupItem>
    </ToggleGroup>
  )
}
```

## Props

### ToggleGroup

Hereda las props de `ToggleGroup`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### ToggleGroupItem

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| ← → | Se mueve entre ítems. |
| Espacio · Enter | Alterna el ítem. |
| Tab | Entra y sale del grupo entero. |

## Accesibilidad

- El grupo necesita `aria-label`: «Alineación», «Vista».
- En modo único es un `RadioGroup` visualmente distinto; si la lista es larga, usá `RadioGroup` de verdad.

## Reglas de uso

- Hasta 4 o 5 ítems: es una barra, no un menú.
- Íconos solos únicamente si son universales (alineación, vista); si no, texto.

## Relacionados

[toggle](/docs/components/toggle.md) · [radio-group](/docs/components/radio-group.md) · [tabs](/docs/components/tabs.md)