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".

Cuándo no usar

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".

Anatomía

Label

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

Estados

Aplicación

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.

Recibir notificaciones por email

Recibir notificaciones por WhatsApp

Do and Don'ts

Mostrar en el checkout

Usar Toggle cuando el cambio se aplica de inmediato, sin un paso de guardado.

Mostrar en el checkout

Evitar Toggle cuando la opción recién se aplica al confirmar el formulario con un botón; en ese caso usar Checkbox.

Mostrar el precio en el catálogo

Redactar la etiqueta en positivo, describiendo lo que se activa al prender el selector.

No ocultar el precio en el catálogo

Evitar etiquetas en negativo: al activarlas generan una doble negación difícil de interpretar.

Mostrar el stock en la tienda

Permitir compras sin stock

Usar un Toggle por cada configuración binaria independiente.

Facturación mensual

Facturación anual

Evitar varios Toggle para opciones mutuamente excluyentes; en ese caso usar Radio.

Accesibilidad

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.

Implementación

Instalá el componente vía terminal.

npm install @nimbus-ds/components

Default

Active

Controlled

Skeleton

import React from "react";
import { Toggle } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Toggle name="notifications" label="Recibir notificaciones por email" />
);

export default Example;

Props

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

Componentes relacionados

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

Name	Type	Description
name*	string	The name of the input element.
active	boolean	Sets toggle state to activated or deactivated.
label	string	Text to be rendered inside the component

Toggle.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
className	string
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ayudanos a mejorar la documentación

¿Encontraste un problema o tenés una sugerencia? Contanos.

Compartí tu opinión