Los radio buttons, también llamados option buttons, que español se suelen llamar botones de radio o botones de opciones, son elementos HTML para formularios que permiten elegir una sola opción entre un grupo. El comportamiento es similar a un select de selección única, salvo que las distintas opciones se presentan de forma explícita en lugar presentarse en un despegable.

Sintaxis

Para mostrar un botón de radio en HTML se utiliza el elemento input con el atributo type="radio":

<input type="radio">

Cómo cualquier otro elemento input, el atributo name es necesario, ya que es enviado junto a los datos del formulario y es utilizado en el servidor para identificar a cada campo. El valor del radio button, también como en otros input, se establece con el atributo value. Por ejemplo:

<input type="radio" name="color" value="azul">

En los radio buttons, el atributo name se utiliza además para definir un grupo de opciones. Un conjunto de radio buttons con el mismo name, pertenecen al mismo grupo de opciones. El usuario solo podrá elegir una opción de cada grupo. En el siguiente ejemplo se definen dos grupos: color y número:

<form>
    <fieldset>
        <legend>Elige un color</legend>
        <label>
            <input type="radio" name="color" value="azul"> Azul
        </label>
        <label>
            <input type="radio" name="color" value="negro"> Negro
        </label>
        <label>
            <input type="radio" name="color" value="amarillo"> Amarillo
        </label>
    </fieldset>
    <fieldset>
        <legend>Elige un número</legend>
        <label>
            <input type="radio" name="numero" value="1"> 1
        </label>
        <label>
            <input type="radio" name="numero" value="2"> 2
        </label>
        <label>
            <input type="radio" name="numero" value="3"> 3
        </label>
        <label>
            <input type="radio" name="numero" value="3"> 4
        </label>
    </fieldset>
</form>

Demo

¿Cuándo utilizar radio buttons?

Los radio buttons se deben utilizar cuándo sea necesario escoger una sola opción entre varias posibles de forma excluyente entre sí. Si no hay varias opciones para elegir, es mucho más adecuado utilizar un checkbox, ya que el checkbox permite ser desmarcado, mientras que el radio button no.

Sí, has leído bien, el radio button no permite ser desmarcado. Una vez seleccionado un radio button, solo se desmarcará si se selecciona otro radio button del mismo grupo, de ahí que se habla de selección de opciones excluyentes entre sí. El comportamiento es similar a los botones de las radios analógicas antiguas que se utilizaban para seleccionar estaciones preconfiguradas: al pulsar un botón, los otros saltaban. De hecho, el nombre de “radio buttons” viene por analogía con el funcionamiento de estos botones.

Si comparas el comportamiento de radio buttons y de un select de selección única, verás que es prácticamente igual. En la gran mayoría de los casos puedes intercambiar ambos y se obtendrá el mismo resultado. La elección de uno u otro se basará prácticamente al 100% en criterios de diseño e UX.

  • Mid

    Hola! gracias por tu explicacion. Hice un formulario en Infusionsof y lo publique en una pagina web WordPress (Soy muy nueva utilizandolos). Utilice un grupo de radio buttons en 2 de las preguntas y todo aparece correctamente pero el resultado de la seleccion no se registra, es decir, cuando el visitante de mi pagina completa el formulario y envia sus respuestas, puedo verlas todas excepto las selecciones hechas en estas 2 preguntas, me aparecen todas las respuestas en “false”.
    A que puede deberse esto? tienes alguna sugerencia para solucionarlo? Un millon de gracias por tu ayuda.

  • rafa

    Hola ¿cual esl adiferencia entre poner?
    1.- 4
    2.- 4

  • alex

    A pesar de que el elemento radio group y select list tengan la misma funcionalidad la diferencia está en que con el radio se disminuye a “un click” la selección para el usuario, pienso que es bueno usarlos cuando se trate de pocas opciones o de selecciones pequeñas como marcar un si o no o un sexo “másculino, femenino”

  • Haydee Estefanía

    Hola, em y si tengo que seleccionar un radio de tres para hacer una operación y que me imprima el resultado en otro formulario, se le pone nombres diferentes a cada uno de los radios???

  • sdasdas

    Oye, si quiero elegir 2 opciones o más, ¿cómo debo hacerlo?

    • chelíz

      Sería un checkbox y no un radio.

  • javyjaja

    muy bien explicado