Docs ejecutables de HTML: Radio button

Q: ¿Cómo se hacen radio buttons en HTML?

Escribe un por opción, dales a todos el mismo name y un value distinto, y pon cada uno en un : Mediana . El nombre compartido los convierte en un grupo donde solo se puede seleccionar uno.

Q: ¿Por qué puedo seleccionar más de un radio button?

Los botones no comparten el mismo name. Los radio buttons forman un grupo solo mediante un name idéntico (en el mismo formulario), y solo se puede seleccionar un botón por grupo.

Q: ¿Cómo obtengo el valor del radio button seleccionado en JavaScript?

Usa form.elements.size.value, donde size es el nombre del grupo; devuelve el valor del botón seleccionado, o una cadena vacía si no hay ninguno. Sin formulario: document.querySelector('input[name="size"]:checked')?.value.

Q: ¿Cómo pongo un radio button por defecto?

Añade checked a un botón del grupo: . Si varios lo tienen, gana el último.

Cómo hacer radio buttons en HTML

Los botones de opción permiten al lector elegir exactamente una opción de un grupo. Cada opción es un <input type="radio">, y darles el mismo name es lo que los convierte en un grupo. Elige una talla y pulsa Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

El formulario envía una pareja, size=m: el name del grupo y el value del botón seleccionado. Las piezas:

El mismo name en todos los botones del grupo. Seleccionar uno deselecciona los demás.
Un value distinto en cada uno. Es lo que recibe el servidor. Un radio sin value envía on, lo que no le dice nada al servidor.
checked en la opción por defecto.
Un <label> alrededor de cada uno, para que el texto se pueda pulsar, y un <fieldset> con <legend> para que los lectores de pantalla anuncien la pregunta ("Size") junto con cada opción.

El name crea el grupo

Los radios con nombres distintos son grupos separados, y cada grupo tiene su propia selección. Este ejemplo tiene dos grupos, más un conjunto roto en el que cada radio recibió por error su propio nombre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Pulsa los tres del grupo roto: todos quedan seleccionados y ninguno se puede volver a desactivar, lo peor de los dos mundos. Los radios se agrupan por name dentro del mismo formulario, así que dos formularios pueden tener cada uno su propio grupo name="size".

Grupos obligatorios y sin opción por defecto

required en cualquier radio del grupo significa que hay que seleccionar uno antes de que se envíe el formulario. Omitir checked obliga al lector a elegir de forma activa, que es lo correcto cuando no hay una opción por defecto razonable:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Pulsa Continue sin elegir y el navegador detiene el envío con un mensaje. En cuanto se elige cualquier opción, el grupo entero es válido. Un grupo sin seleccionar que no es obligatorio no envía nada, igual que un checkbox sin marcar.

Un clic puede seleccionar un radio pero nunca deseleccionarlo. Si "sin respuesta" debe ser posible después de haber elegido, añade una opción explícita para ello.

Leer el valor seleccionado en JavaScript

form.elements.name devuelve el grupo entero, y su .value es el valor del radio seleccionado (una cadena vacía cuando no hay ninguno). El evento change se dispara en el radio que acaba de seleccionarse:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

El listener está en el formulario, así que captura un cambio en cualquiera de sus campos. Fuera de un formulario, busca el radio seleccionado con document.querySelector('input[name="period"]:checked').

Comportamiento con el teclado

Un grupo de radios es una sola parada en el orden de Tab. Tab entra en el grupo y cae en el radio seleccionado (o en el primero, si no hay ninguno seleccionado), y las flechas mueven la selección entre las opciones. Otro Tab sale del grupo. Esto viene gratis con inputs radio reales que comparten name, y es un motivo más para no reconstruir los radios con elementos <div>.

Dar estilo a los radio buttons

accent-color cambia el color del radio nativo. appearance: none te deja dibujar tu propio círculo. Y como un radio oculto se puede seleccionar a través de su etiqueta, un grupo puede parecer un conjunto de tarjetas conservando todo el comportamiento de radio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

El círculo personalizado es solo un borde grueso cuando está marcado. Las tarjetas ocultan el input con opacity: 0 en lugar de display: none, para que siga recibiendo el foco y las flechas sigan funcionando, y :has(input:checked) da estilo a la tarjeta seleccionada. :has() funciona en las versiones actuales de Chrome, Firefox y Safari.

¿Radio, checkbox o select?

Usa	Cuando
Radio buttons	Una elección entre pocas opciones (unas 2 a 6) que deben verse todas
Checkboxes	Cualquier número de elecciones, incluida ninguna
Un `<select>`	Una elección de una lista larga, como países (consulta select en HTML)

Errores comunes

name distintos en un mismo grupo. Se pueden seleccionar todos los radios y no se puede quitar ninguno.
Sin value. El servidor recibe on se elija lo que se elija.
Ocultar el input con display: none en un diseño propio. Ya no puede recibir el foco ni usarse con el teclado.
Sin <fieldset> ni <legend>. Los lectores de pantalla anuncian "Small, botón de opción" sin la pregunta a la que corresponde.
Un solo radio button para una casilla de "Acepto". Nunca se puede desmarcar; usa un checkbox.
checked en varios radios del mismo grupo. Solo el último acaba seleccionado.

Preguntas frecuentes

¿Cómo se hacen radio buttons en HTML?

Escribe un <input type="radio"> por opción, dales a todos el mismo name y un value distinto, y pon cada uno en un <label>: <label><input type="radio" name="size" value="m"> Mediana</label>. El nombre compartido los convierte en un grupo donde solo se puede seleccionar uno.

¿Por qué puedo seleccionar más de un radio button?

Los botones no comparten el mismo name. Los radio buttons forman un grupo solo mediante un name idéntico (en el mismo formulario), y solo se puede seleccionar un botón por grupo.

¿Cómo obtengo el valor del radio button seleccionado en JavaScript?

Usa form.elements.size.value, donde size es el nombre del grupo; devuelve el valor del botón seleccionado, o una cadena vacía si no hay ninguno. Sin formulario: document.querySelector('input[name="size"]:checked')?.value.

¿Cómo pongo un radio button por defecto?

Añade checked a un botón del grupo: <input type="radio" name="plan" value="free" checked>. Si varios lo tienen, gana el último.

¿Se puede desmarcar un radio button?

No haciendo clic en él; un clic solo selecciona. Ofrece una opción "Ninguna", reinicia el formulario o asigna button.checked = false en JavaScript. Si la elección debe ser opcional y se debe poder quitar, un checkbox o un select pueden encajar mejor.

Conceptos relacionados