Toggle

• Alternar entre dos estados opuestos: una opción que solo admite dos valores contrarios y reversibles (on/off, visible/oculto, sí/no), sin posiciones intermedias. Ej.: "Modo vacaciones", "Mostrar el precio en el catálogo".
• Habilitar una funcionalidad: controlar de forma independiente cada ítem de un conjunto de opciones. Ej.: activar un medio de envío o un canal de notificación.
• Mostrar u ocultar un elemento: exponer o esconder algo de inmediato en la tienda o el panel. Ej.: "Mostrar el producto en la tienda", "Mostrar en el checkout".

• Registrar una opción con guardado: una opción que recién se aplica al confirmar el formulario con un botón (cuando el cambio no es inmediato). En su lugar, usar Checkbox.
• Elegir una opción excluyente: seleccionar una sola opción entre varias mutuamente excluyentes. En su lugar, usar Radio.
• Ejecutar una acción puntual: disparar algo en lugar de mantener un estado on/off persistente. En su lugar, usar Button. Ej.: "Guardar", "Publicar".

1. Track: control con forma de píldora que representa la posición on/off y recibe la interacción.
2. Thumb: círculo que se desplaza dentro del track para señalar la posición activa o inactiva.
3. Label: texto opcional que describe la configuración que controla el track.

Suele aparecer en paneles de configuración, encabezados de tarjetas y filas de una lista, alineado a la derecha de un título que describe la opción y, cuando hace falta, una descripción de apoyo.

• Etiqueta accesible: acompañar el control con un label visible o, si el texto va por fuera del componente, con un aria-label que describa la configuración, para que los lectores de pantalla anuncien qué se activa o desactiva.
• Navegación por teclado: el control se alcanza con Tab y se activa con la barra espaciadora, ya que renderiza un <input type="checkbox"> nativo.
• Foco visible: Nimbus aplica un anillo de foco propio con :focus-visible al navegar con teclado; no suprimir el outline al personalizar estilos.
• Estado deshabilitado: usar la prop disabled, no simularlo con color u opacidad; el input deshabilitado comunica el estado inactivo a las tecnologías de asistencia.

El Toggle nombra la configuración que se activa o desactiva. La persona debe entender qué controla con solo leer el label, sin necesidad de activarlo para descubrirlo.

• Capitalización: sentence case. Solo nombres propios con mayúscula.
• Longitud: 1 a 3 palabras idealmente, máximo 5 si el contexto lo requiere.
• Puntuación: sin punto final.
• Forma verbal: frase nominal cuando el nombre de la configuración es claro por sí solo ("Envío gratis"); frase verbal cuando "activado" podría generar duda sobre qué significa exactamente ("Mostrar precio en el catálogo"). Elegir una forma y mantenerla en todos los toggles de la misma vista, sin mezclar.
• En positivo: el label nunca empieza con negación. "Mostrar precio en el catálogo", no "No ocultar el precio en el catálogo".
• Sin "activar/desactivar" en el label: el toggle ya comunica el estado; repetirlo es redundante. "Precio en el catálogo", no "Activar precio en el catálogo".
• Sin artículo inicial: las frases nominales no arrancan con artículo definido. "Notificaciones por e-mail", no "Las notificaciones por e-mail".

Instalá el componente vía terminal.

Las propiedades adicionales se pasan al elemento <input>. Consultá la documentación del elemento input para ver la lista de atributos aceptados.

• Checkbox — Para registrar una selección que se confirma al guardar el formulario, sin efecto inmediato.
• Radio — Para elegir una sola opción entre varias mutuamente excluyentes.

Toggle