Controles de selección.
Checkbox permite varias elecciones, radio una opción del conjunto, select listas extensas y switch un cambio binario inmediato.
Cuándo usar
Checkbox permite varias elecciones, radio una opción del conjunto, select listas extensas y switch un cambio binario inmediato.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Fieldset y legend cuando hay grupo |
| 2 | Control nativo |
| 3 | Label |
| 4 | Ayuda |
| 5 | Estado |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| unchecked | Opción disponible |
| checked | Selección visible y semántica |
| indeterminate | Selección parcial explicada |
| disabled | No operable y legible |
| invalid | Mensaje del grupo |
Accesibilidad
- No reemplazar checkbox con botones sin semántica.
- Legend formula la pregunta completa.
- El switch ejecuta inmediatamente; si requiere Guardar, usar checkbox.
- El target incluye label.
HTML de referencia
<fieldset>
<legend>Formato de descarga</legend>
<label><input type="radio" name="format" value="csv"> CSV</label>
<label><input type="radio" name="format" value="json"> JSON</label>
</fieldset>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.