Contenidos · Checkbox y radio
Selección (decisiones nativas)
Presenta opciones múltiples o excluyentes conservando semántica, teclado y personalización mediante los colores del framework.
HTML nativo
Checkbox y radio conservan el comportamiento esperado.
Accesible
Label, fieldset y legend proporcionan nombre y contexto.
Color componible
Las utilidades bc-* controlan el color seleccionado.
Código + resultado
Patrones de selección
Selecciona un patrón para revisar únicamente su código y resultado.
<label class="q-choice">
<input class="q-checkbox bc-primary" type="checkbox" checked>
Correo
</label><fieldset class="q-fieldset">
<legend class="q-legend">Visibilidad</legend>
<label class="q-choice">
<input class="q-radio bc-violet-500" type="radio" name="visibility">
Público
</label>
<label class="q-choice">
<input class="q-radio bc-violet-500" type="radio" name="visibility">
Privado
</label>
</fieldset>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-fieldset | Agrupa controles relacionados. | Rodear conjuntos con una misma pregunta. |
.q-legend | Nombra el conjunto. | Primer hijo del fieldset. |
.q-choice | Alinea control y texto. | Aplicar al label visible. |
.q-checkbox | Selección múltiple. | Opciones independientes. |
.q-radio | Selección excluyente. | Compartir el mismo name. |
Recomendaciones
Buenas prácticas de Selección
Pregunta visible
Nombra cada conjunto mediante legend.
Label completo
Permite activar el control pulsando también el texto.
Estado real
Usa checked y disabled en lugar de simular estados visuales.