HTML
Cómo utilizar checkbox y radio para elecciones independientes o exclusivas, asociarlos con labels y enviar sus valores correctamente.
Checkbox y radio representan decisiones distintas:
checkbox → cada opción puede seleccionarse de forma independiente
radio → una sola opción dentro de un grupo<label>
<input
type="checkbox"
name="newsletter"
value="yes"
>
Quiero recibir novedades
</label>Si está seleccionado, envía:
newsletter=yesSi no está seleccionado, normalmente no envía ninguna entrada.
<input type="checkbox" name="terms">Sin value, un checkbox marcado suele enviar on. Declara un valor con significado para el servidor.
<fieldset>
<legend>Tecnologías de interés</legend>
<label>
<input type="checkbox" name="technology" value="javascript">
JavaScript
</label>
<label>
<input type="checkbox" name="technology" value="typescript">
TypeScript
</label>
</fieldset>Varios controles con el mismo name pueden generar varias entradas:
technology=javascript
technology=typescriptEl servidor debe procesar valores repetidos correctamente.
<input type="checkbox" name="terms" required>Exige que ese control concreto esté marcado. No significa automáticamente “selecciona al menos uno del grupo” para varios checkboxes.
Para reglas grupales más complejas necesitas lógica adicional y validación del servidor.
<fieldset>
<legend>Método de pago</legend>
<label>
<input type="radio" name="payment" value="card">
Tarjeta
</label>
<label>
<input type="radio" name="payment" value="cash">
Efectivo
</label>
</fieldset>Los radios se agrupan por name. Seleccionar uno desmarca otro del mismo grupo y form owner.
Incorrecto:
<input type="radio" name="card" value="card">
<input type="radio" name="cash" value="cash">Son dos grupos independientes y ambos podrían seleccionarse.
Correcto:
<input type="radio" name="payment" value="card">
<input type="radio" name="payment" value="cash"><input type="radio" name="plan" value="basic" checked>checked define el estado inicial. JavaScript puede cambiar la propiedad actual sin modificar necesariamente el atributo del source.
No preselecciones una opción sensible solo para acelerar el flujo si el usuario debe tomar una decisión explícita.
<input type="radio" name="plan" value="basic" required>Un required dentro del grupo exige que alguna opción con ese name esté seleccionada.
Para claridad, puede declararse en todos o en uno según convención, pero la pregunta y el error deben referirse al grupo.
Un checkbox puede tener un estado visual indeterminado mediante JavaScript:
checkbox.indeterminate = true;No existe un atributo HTML indeterminate. Ese estado visual no cambia por sí solo el valor enviado ni checked.
Aporta en un control “seleccionar todo” cuando algunos hijos están seleccionados.
Un checkbox puede presentarse como switch cuando representa un estado inmediato on/off.
HTML no tiene input type="switch" estable universal. Puedes usar checkbox y, cuando el patrón lo requiere, role="switch", manteniendo teclado, checked state y label.
No llames switch a una decisión que solo se guarda al enviar un formulario si el feedback sugiere efecto inmediato.
<input type="checkbox" checked disabled>No puede cambiarse y normalmente no se envía. Si el servidor necesita conocer el valor, no confíes en duplicarlo únicamente mediante hidden sin validar la regla.
<input id="available" type="checkbox" name="available">
<label for="available">Disponible</label>El label amplía el área de activación. No coloques links interactivos dentro del label si generan acciones ambiguas.
Para términos:
<label>
<input type="checkbox" name="terms" required>
Acepto los términos
</label>
<a href="/terms">Leer términos</a><fieldset>
<legend>¿Qué servicio necesitas?</legend>
<label>
<input type="checkbox" name="service" value="web-application">
Aplicación web
</label>
<label>
<input type="checkbox" name="service" value="frontend">
Desarrollo frontend
</label>
<label>
<input type="checkbox" name="service" value="mvp">
MVP desde cero
</label>
</fieldset>on.¿Por qué dos radios con names diferentes pueden seleccionarse al mismo tiempo?
Porque el navegador considera que pertenecen a grupos distintos; la exclusividad se establece mediante el mismo name y formulario asociado.
Atributos de controles, autocomplete e inputmode configura entrada, estado y ayuda del navegador.