Tipo 01
Encendido / apagado
Los dos estados básicos.
Componentes Interruptores
Interruptores
Un interruptor activa o desactiva una opción al instante, como un interruptor de luz.
Uso
Úsalo para activar o desactivar una configuración que se aplica de inmediato, sin botón de "Guardar".
- Configuraciones de encendido/apagado
- Cambios que se aplican al instante
- Opciones dentro de un formulario que se envía después: usa casillas
- Elegir entre dos opciones que no son "sí/no"
Principios
1
Inmediato
El cambio se aplica al tocar.
2
Binario
Solo dos estados: activado o desactivado.
3
Claro
La etiqueta describe lo que se activa.
Tipos
Tipo 02
Deshabilitado
No se puede cambiar.
Tipo 03
En lista
La etiqueta a la izquierda y el interruptor al final de la fila.
Anatomía
- Pista (track)
- Manija (thumb)
- Etiqueta
Comportamiento
- Tocar el interruptor o su etiqueta cambia el estado.
- La manija se desliza con una transición corta.
- Si el cambio tarda, muestra un indicador de progreso al lado.
Medidas
| Medida | Valor de referencia |
|---|---|
| Pista | 36 × 14 dp |
| Manija | 20 dp |
| Área táctil | 48 × 48 dp |
| Espacio con la etiqueta | 16 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Rol
.
Estado
El lector anuncia "activado" o "desactivado".
No solo color
La posición de la manija también indica el estado.