# Selección (decisiones nativas)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/selection.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Checkbox y radio

Presenta opciones múltiples o excluyentes conservando semántica, teclado y personalización mediante los colores del framework.

v2.0

✓
## 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.

HTML

```html
<label class="q-choice">
  <input class="q-checkbox bc-primary" type="checkbox" checked>
  Correo
</label>
```

Resultado aplicado  Selección · múltiple
Componente real
Correo

HTML

```html
<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>
```

Resultado aplicado  Selección · exclusiva
Componente real
Visibilidad     Público    Privado

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

01
### Pregunta visible
Nombra cada conjunto mediante legend.

02
### Label completo
Permite activar el control pulsando también el texto.

03
### Estado real
Usa checked y disabled en lugar de simular estados visuales.