Switch

Interruptor on/off para activar o desactivar opciones.

---

Import

import { Switch } from '@imansi/ui';

---

Uso básico

<Switch label="Modo oscuro" />

---

Estados

Activo por defecto

<Switch label="Notificaciones" defaultChecked />

Deshabilitado

<Switch label="Función no disponible" disabled />

---

Con descripción

<Switch
  label="Notificaciones por email"
  hint="Recibí un correo cuando alguien te mencione"
/>

---

Controlado

import { useState } from 'react';
import { Switch } from '@imansi/ui';

export function Configuracion() {
  const [oscuro, setOscuro] = useState(false);

  function toggleModo(checked) {
    setOscuro(checked);
    document.documentElement.dataset.mode = checked ? 'dark' : 'light';
  }

  return (
    <Switch
      label="Modo oscuro"
      checked={oscuro}
      onCheckedChange={toggleModo}
    />
  );
}

---

Props

Prop	Tipo	Default	Descripción
label	string | ReactNode	—	Texto del switch
hint	string	—	Texto de ayuda
checked	boolean	—	Estado controlado
defaultChecked	boolean	false	Estado inicial
onCheckedChange	(checked: boolean) => void	—	Callback al cambiar
disabled	boolean	false	Deshabilita el switch
id	string	autogenerado	ID del input
className	string	—	Clases adicionales

---

Switch vs Checkbox

Característica	Switch	Checkbox
Uso típico	Configuración on/off	Selección múltiple
Efecto	Inmediato	Requiere confirmar
Ejemplo	"Modo oscuro"	"Acepto términos"

---

Accesibilidad

• role="switch" con aria-checked
• Navegable con Tab, toggle con Space
• Compatible con lectores de pantalla