Radio Button

 

RADIO BUTTON

Un botón de opción o botón de radio (a veces llamado incorrectamente «botón radial») es un tipo de widget de interfaz gráfica gráfi ca de usuario que permite al usuario el elegir egir una de un conjunto predefinido de opciones. Los botones de opción se arreglan en grupos de dos o más y se muestran en la pantalla como, por ejemplo, una lista de agujeros circulares que  pueden contener un espacio blanco (para la opción de «no seleccionado») o un punto (para la opción de «seleccionado»). Adyacente a cada botón de opción normalmente se muestra un texto que describe la opción que representa el botón de opción. Cuando el usuario selecciona un botón de opción, cualquier botón de opción previamente seleccionado en el mismo grupo queda deseleccionado. Un botón de opción se selecciona s elecciona dando clic sobre la opción o sobre el texto, o bien usando un atajo de teclado.

Los botones de opción (botones de radio) se llaman así en referencia a los botones físicos fí sicos que se usan en los radios para seleccionar estaciones preajustadas - cuando se presionaba uno de los botones, otro de los botones saltaba.

Es posible que, inicialmente, ninguno de los botones de opción en un grupo esté seleccionado. Este estado no puede restaurarse interactuando con el widget del botón de opción (pero es posible a través de otros elementos de la interfaz de usuar usuario). io).

Un aspecto interesante de los botones de opción, cuando se utilizan en un formulario web en HTML, es que si no se marca ningún botón en un grupo, entonces no se pasa ningún  par nombre-valor cuando se envía el formulario. Por ejemplo, para un grupo de botones de opción llamado Sexo, con las opciones de Masculino y Femenino, la variable Sexo no pasaría, ni siquiera con un valor en blanco

¿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í.  No obstante 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 radi o button no. Es muy importante saber que el radio Button puede ser desmarcado siempre y cuando este agregado a radio button Group 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.  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.

Ejemplo de RadioButton

A continuación se muestra un ejemplo de cómo se ve el botón de radio en su navegador.  Negro Verde Azul Amarillo Rojo   Rojo

En nuestro ejemplo, notará que solo puede seleccionar una opción de botón de opción.