Contenidos · Switch
Activación (estado inmediato)
Representa una preferencia que cambia entre activa e inactiva y comunica su estado mediante un checkbox nativo con role switch.
Dos estados
Comunica claramente activado o desactivado.
Semántica nativa
Conserva checked, disabled y foco de teclado.
Color primario
bc-primary aplica el mismo color utilizado por btn-primary.
Código + resultado
Preferencia activable
El texto describe la preferencia; al pulsar, la perilla se desplaza suavemente y el fondo adopta el color primario.
<label class="q-choice">
<input class="q-switch rounded-100 bc-primary" type="checkbox" role="switch" checked>
Recibir notificaciones
</label>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-switch | Control binario animado. | Aplicar a input type checkbox. |
role="switch" | Expone el patrón a tecnologías de asistencia. | Añadir cuando representa activación inmediata. |
.rounded-100 | Redondea pista y perilla. | Utilidad opcional de bordes. |
.bc-primary | Color activo primario. | Coincide con el color visual de btn-primary. |
.bc-{color} | Color activo alternativo. | Permite usar otro color semántico cuando el contexto lo requiera. |
Recomendaciones
Buenas prácticas de Activación
Estado inmediato
Usa switch para preferencias que se aplican al cambiar.
Texto afirmativo
Describe qué queda activo, no la acción de pulsar.
Sin ambigüedad
No lo uses para elegir entre más de dos alternativas.