Radio button

Los radio buttons representan un grupo de opciones mutuamente excluyentes, en comparación con los checkbox que permiten a los usuarios hacer una o más selecciones de un grupo. En los casos en los que solo se permite una selección de un grupo se debe utilizar siempre el radio button.

Variaciones y tipos

  • Generalmente, se apilarán de manera vertical en una columna. Si existen más de 6 opciones, se podrán disponer en varias columnas.
  • La etiqueta de los radio buttons comenzará con mayúsculas.

Composición

El componente de radio button se compone de:

  • Radio button label
    Describe la información que se quiere seleccionar o deseleccionar.
  • Radio button input
    Indica el estado correspondiente. Por defecto será siempre el unselected.

Estados

  • Unselected Default
    Su estado por defecto.

  • Unselected Disabled
    Estado en el que se encuentra cuando la acción de decisión está bloqueada para los usuarios.

  • Selected Default
    Estado seleccionado.

  • Selected Disabled
    Estado seleccionado que no puede ser modificado por el usuario.

Comportamiento

Los radio button pueden tener una relación padre-hijo con otros radio buttons.

  • Describe la información que se quiere seleccionar o deseleccionar
  • Si el padre no está marcado, los hijos tampoco lo están

Alineación y orden

La etiqueta del radio button siempre se sitúa a la derecha del input. Si hay un conjunto de radio buttons, se pueden disponer de forma vertical o horizontal dependiendo del caso de uso y la estructura de la UI. Cuando sea posible organizar las agrupaciones de checkbox y radio button verticalmente para facilitar su lectura.

Usos

Este componente se utiliza frecuentemente en formularios. Éstos se pueden situar a página completa, en modales o en un panel lateral.