Switch

El Switch activa o desactiva un ajuste con efecto inmediato, como encender o apagar una preferencia. Muestra la etiqueta a la izquierda y el interruptor a la derecha.

Propiedades y configuraciones

Cuando usarlo

Úsalo para ajustes binarios que se aplican al instante, sin botón “Guardar”: preferencias de notificaciones, opciones de accesibilidad o privacidad de la cuenta.

Si la elección se envía junto con un formulario (postulación, solicitud), usa Checkbox. Si hay que elegir entre dos alternativas que no son “activo / inactivo” (retiro o envío, persona o empresa), usa Radio Button. Para acciones irreversibles, usa un Button con confirmación en Dialog.

Buenas prácticas

Recomendado: Úsalo para ajustes que se aplican al instante

El switch promete efecto inmediato: cada ajuste cambia apenas se activa o desactiva, sin pedir que la persona guarde.

Recomendado: Nombra el ajuste, no la acción ni el estado

La etiqueta describe qué se enciende y no cambia entre “Activado” y “Desactivado”: el switch ya muestra el estado.

Recomendado: Agrupa ajustes relacionados bajo un título

Con varios switches, reúnelos bajo un título con una descripción breve para dar contexto.

Recomendado: Explica en el grupo cuando falta una condición mínima

Si al menos un ajuste debe quedar activo, usa el error del grupo con un mensaje que diga qué hacer.

Malas prácticas

No recomendado: No lo uses dentro de un formulario que se envía

Si el cambio solo se aplica al presionar un botón, el switch parece que ya tuvo efecto. Usa Checkbox.

No recomendado: No uses la etiqueta para mostrar el estado

“Activado” o “Desactivado” no dicen qué ajuste se controla y duplican lo que ya muestra el switch.

No recomendado: No lo uses para elegir entre dos alternativas

Elegir entre retiro o envío no es encender o apagar algo: no queda claro qué significa “encendido”. Usa Radio Button.

No recomendado: No lo uses para acciones destructivas o irreversibles

Renunciar a un beneficio no es un ajuste que se prende y apaga. Usa un botón con confirmación.

Recomendaciones de accesibilidad

Conserva el role="switch" sobre el input nativo
El kit usa <input type="checkbox" role="switch">, que se anuncia como “interruptor, activado/desactivado”. No lo reemplaces por un <div> ni quites el rol.

Mantén una etiqueta estable y visible
El texto de __label es el nombre accesible porque el input está dentro del <label>. No lo cambies según el estado; el estado lo anuncia el propio control.

Anuncia el resultado del cambio
Como el efecto es inmediato, confirma el guardado (o el error) con un mensaje en una región role="status", como una Alert o un Snackbar.

Etiqueta el grupo
En .cl-choice-field--switch, relaciona los switches con la pregunta usando role="group" y aria-labelledby, o un <fieldset> con <legend>, y vincula la ayuda o el error con aria-describedby.

No dependas solo del color
El track verde indica “encendido”, pero la posición del indicador también lo hace. No uses colores propios que eliminen esa diferencia de posición.

Explica los switches deshabilitados
En disabled el track es igual encendido o apagado. Indica en texto visible el estado actual y por qué no se puede cambiar.