# Switch

> Encendido o apagado, con efecto inmediato. Dos tamaños y variante de acento.

```tsx
import { Switch } from "sebs7n-ui/switch"
```

## Ejemplos

### Efecto inmediato

Si el cambio se aplica al apretar «Guardar», es un `Checkbox`.

```tsx
import { Label } from "sebs7n-ui/label"
import { Switch } from "sebs7n-ui/switch"
import { useId } from "react"

function Basico() {
  const a = useId()
  const b = useId()
  const c = useId()
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Switch defaultChecked id={a} />
        <Label htmlFor={a}>Notificaciones</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch defaultChecked id={b} variant="accent" />
        <Label htmlFor={b}>Recordatorios de vencimiento</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id={c} size="sm" />
        <Label htmlFor={c}>Modo compacto</Label>
      </div>
    </div>
  )
}
```

## Props

### Switch

Hereda las props de `Switch.Root`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `size` | `"sm" \| "md"` | `"md"` | — |
| `variant` | `"default" \| "accent"` | `"default"` | — |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Espacio · Enter | Alterna. |
| Tab | Entra y sale. |

## Accesibilidad

- Emite `role="switch"` con `aria-checked`: el lector dice «activado/desactivado», no «marcado».
- Necesita `Label` asociado. El texto no debe cambiar al alternar («Notificaciones», no «Activar notificaciones»).

## Reglas de uso

- **Efecto inmediato.** Si el cambio se aplica al apretar «Guardar», es un `Checkbox`.
- `variant="accent"` cuenta como el único acento de la pantalla: no lo combines con un `Button variant="accent"`.

## Relacionados

[checkbox](/docs/components/checkbox.md) · [toggle](/docs/components/toggle.md)