Molecules

Switch

Activa o desactiva una configuración de forma inmediata, sin necesidad de confirmar. Es un toggle binario (On/Off). Extraído con 4 variantes del Figma (node 40000816:16997): On×Off × Disabled×Enabled.

Extraído8 variantes — Figma: ⏺ Switch (node 40000816:16997)

Preview

Notificaciones activadas

Notificaciones desactivadas

Opción deshabilitada (Off)

Opción deshabilitada (On)

Variantes (4 de Figma)

Off=False, Disabled=False

Estado OFF activo — el usuario puede interactuar

Off=True, Disabled=False

Estado ON activo — el usuario puede interactuar

Off=False, Disabled=True

Estado OFF bloqueado — no interactuable

Off=True, Disabled=True

Estado ON bloqueado — no interactuable

Switch vs Checkbox

Switch

Activar/desactivar una configuración con efecto inmediato

Activar notificaciones push

Checkbox

Seleccionar items de una lista antes de confirmar una acción

Seleccionar visitas para exportar

Accesibilidad

role="switch"

Identifica el elemento como toggle binario

aria-checked="true|false"

Estado actual On/Off

aria-disabled="true"

Cuando el switch no es interactuable

aria-label

Descripción si no hay texto visible adyacente

Props API

interface SwitchProps {
  checked: boolean            // Estado On/Off
  disabled?: boolean          // No interactuable
  label: string               // Texto descriptivo (requerido)
  onChange: (checked: boolean) => void
}

<button
  role="switch"
  aria-checked={checked}
  aria-disabled={disabled}
  onClick={() => !disabled && onChange(!checked)}
>
  {label}
</button>