Estilos

Componentes

Formularios

Organismos

Botón de radio (radio button)

El botón de radio es un componente que permite a las personas usuarias seleccionar sólo una opción dentro de un conjunto limitado de alternativas visibles.

Uso

Cuándo usar

  • Cuando se requiere una única respuesta dentro de una lista de cinco o menos opciones.

Cuándo no usar

Tipos

Los botones de radio permiten seleccionar solo una opción dentro de un grupo. Cuando uno está seleccionado, se marca con un punto en el centro del círculo, y al elegir una nueva opción, la anterior se desmarca automáticamente.

Tipos de radio

Disposición

Ejemplo de disposición vertical
check

Una disposición vertical ayuda a mantener un flujo visual natural y aumenta la legibilidad.

Ejemplo de disposición vertical
info

La disposición horizontal puede ser útil cuando hay sólo dos opciones con etiquetas cortas.

Contextos de uso

Selección de opciones en solicitudes o turnos.

Facilitan la elección de un turno, horario o tipo de servicio, asegurando que la persona usuaria seleccione solo una opción que se adapte a su disponibilidad.

Ejemplo de contexto de uso en solicitudes o turnos

Selección binaria.

Los botones de radio se usan en preguntas con respuestas binarias, como “sí” o “no”. Para opciones de encendido/apagado, es mejor usar el componente switch

Ejemplo de contexto de uso en selección binaria

Contenido

Etiquetas de grupo

Usá títulos solo si ayudan a entender mejor para qué sirven los botones de radio. No pongas títulos de más si ya hay uno general.

Etiquetas de botones de radio

Las etiquetas de los botones de radio deben ser siempre claras y concisas, y deben colocarse a la derecha del botón para mantener una estructura visual coherente y fácil de leer.

Longitud de las etiquetas

Si una etiqueta es muy larga, es mejor que se acomode en una segunda línea antes que recortarla. Lo ideal es que tenga tres palabras o menos, y si no entra, conviene reformularla. Si se extiende, el texto debe ir debajo del botón para mantener una buena alineación y legibilidad.

Organización

Asegurate de que las opciones estén organizadas de forma lógica y con sentido. Tené en cuenta que, al listar elementos alfabéticamente, el orden puede cambiar al localizar el texto.

Puntuación

Evita usar signos de puntuación en las etiquetas, excepto cuando la etiqueta sea una oración completa.

Contenido en esta página

Casilla de selección única (Radio)

Predeterminada

Seleccioná una opción *

  <p class="headline-md">Seleccioná una opción *</p>
  <div class="form-radio">
    <input
      class="form-radio-input"
      type="radio"
      name="professionRadio"
      id="profession-radio-designer"
      value="diseñador"
      checked
      />
    <label class="form-radio-label" for="profession-radio-designer">
      Diseñador
    </label>
  </div>
  <div class="form-radio">
    <input
      class="form-radio-input"
      type="radio"
      name="professionRadio"
      id="profession-radio-developer"
      value="desarrollador"
      />
    <label class="form-radio-label" for="profession-radio-developer">
      Desarrollador
    </label>
  </div>
  <div class="form-radio">
    <input
      class="form-radio-input"
      type="radio"
      name="professionRadio"
      id="profession-radio-content"
      value="redactor"
      />
    <label class="form-radio-label" for="profession-radio-content">
      Redactor de contenidos
    </label>
  </div>
  <div class="form-radio">
    <input
      class="form-radio-input is-invalid"
      type="radio"
      name="professionRadio"
      id="profession-radio-validation"
      value="validacion"
      />
    <label class="form-radio-label" for="profession-radio-validation">
      Validación
    </label>
  </div>

Radio Group

Ejemplo Radio GroupOpcional

Este es un texto de ayuda que da más información sobre el Input. Es opcional, pero recomendado, y de no más de 3 líneas.

 <div class="form-input-group" role="radiogroup" aria-labelledby="group-label">            
    <div class="form-label-container">
      <span id="group-label" class="form-label">Ejemplo Radio Group</span>
      <span class="badge-forms badge-optional-forms">Opcional</span>
    </div>
    <p class="form-label-description">
      Este es un texto de ayuda que da más información sobre el Input. Es opcional, pero recomendado, y de
      no más de 3 líneas.
    </p>
    <div class="form-radio">
      <input type="radio" name="professionRadioGroup" value="radio 1" class="form-radio-input" id="radio_1" />
      <label class="form-radio-label" for="radio_1">
        Leer
      </label>
    </div>
    <div class="form-radio">
      <input type="radio" name="professionRadioGroup" value="radio 2" class="form-radio-input" id="radio_2" />
      <label class="form-radio-label" for="radio_2">
        Escuchar música
      </label>
    </div>
    <div class="form-radio">
      <input type="radio" name="professionRadioGroup" value="radio 3" class="form-radio-input" id="radio_3" />
      <label class="form-radio-label" for="radio_3">
        Hacer deporte
      </label>
    </div>
  </div>

Deshabilitada

  <div class="form-radio">
    <input
        class="form-radio-input"
        type="radio"
        name="radioDisabled"
        id="radio-disabled"
        value="validacion"
        disabled
      />
    <label class="form-radio-label" for="radio-disabled" aria-disabled="true">
      Deshabilitado
    </label>
  </div>
  <div class="form-radio">
    <input
      class="form-radio-input"
      type="radio"
      name="radioDisabled"
      id="radio-disabled-checked"
      value="validacion"
      disabled
      checked
      />
    <label class="form-radio-label" for="radio-disabled-checked" aria-disabled="true">
      Deshabilitado
    </label>
  </div>

Sin texto

  <div class="form-radio">
    <input
      class="form-radio-input"
      type="radio"
      name="radioNoText"
      id="radio-no-text"
      value="Sin texto"
    />
    <label
      class="form-radio-label"
      for="radio-no-text"
      aria-label="Casilla múltiple sin texto"
    ></label>
  </div>

Posicionamiento

 
  <div class="form-radio reverse">
    <input
      class="form-radio-input"
      type="radio"
      name="radioPosition"
      id="radio-position"
      value="redactor"
      />
    <label class="form-radio-label" for="radio-position">
      Radio posicionado a la derecha
    </label>
  </div>

Variantes

Anatomía

Anatomía del botón de radio
ElementoCarácter
Casilla de selecciónObligatorio, indica si la caja de validación esta seleccionada o deseleccionada.
EtiquetaObligatorio, describe la información que la persona usuaria puede seleccionar.
Anatomía del botón de radio
ElementoCarácter
1. LabelObligatorio, texto que informa el tipo de contenido que la persona usuaria puede seleccionar.
2. Indicador de requeridoOpcional, indica si seleccionar una opción del grupo es obligatorio u opcional.
3. Texto descriptivoOpcional, se utiliza para proporcionar ayuda o contexto adicional a la persona usuaria.
4. Botón de radioObligatorio, describe la información que podes seleccionar.

Estados

Predeterminado (default)

Estado predeterminado del botón de radio en una interfaz.

Ejemplo del botón de radio en estado predeterminado

Sobre (hover)

Estado que adopta el botón de radio cuando un cursor pasa sobre él, cambiando su apariencia para indicar su interactividad a la persona usuaria.

Ejemplo del botón de radio en estado 'sobre'

En foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Ejemplo del botón de radio en estado 'foco'

Error

Para garantizar la accesibilidad, el estado de error debe ser claramente perceptible. En los botones de radio, se utiliza un borde en color rojo con suficiente contraste. Esto asegura que todas las personas puedan identificar y corregir errores fácilmente, cumpliendo con las pautas de accesibilidad (WCAG).

Ejemplo del botón de radio en estado error

Deshabilitado (disabled)

Estado que indica que el botón no está disponible para la interacción, lo que significa que no puede activarse.

Ejemplo del botón de radio en estado deshabilitado

Espaciados

La separación vertical entre botones de radio es de 8px. tanto para dispositivos desktop como mobile..

Podes consultar la ficha de patrones de formulario para conocer la separación entre secciones.

Ejemplo de espaciado del botón de radio

Contenido en esta página

Navegación alternativa

El componente de botón de radio está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado (seleccionado o deseleccionado) de forma clara.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con elenter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Ejemplo de navegacion alternativa del botón de radio

Etiquetado descriptivo

Un botón de radio siempre debe ir acompañado de una etiqueta <label> clara y relacionada con la acción u opción que representa.

El atributo "for" asocia un <label> con un elemento de formulario como un <input>, <select>, <textarea>, etc. haciendo coincidir su valor con el atributo "id" del elemento correspondiente.

Interactividad limitada

Cuando un botón de radio está deshabilitado temporalmente, es importante indicarlo correctamente mediante el atributo "disabled". Además, debe evitarse que el foco del teclado llegue al componente, y debe comunicarse su estado a tecnologías de asistencia.

<div class="form-radio">
  <input 
    class="form-radio-input" 
    type="radio" 
    name="professionRadio" 
    id="profession-radio-designer" 
    value="diseñador"
    checked 
  />
  <label class="form-radio-label" for="profession-radio-designer"> Diseñador </label>
</div>

Criterios WCAG aplicables

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.4.6 Headings and Labels (Level AA)

Si se utilizan encabezados o etiquetas, deben describir con precisión el propósito o contenido al que se refieren. Esto facilita la comprensión y navegación del contenido, especialmente para personas con discapacidades cognitivas o que utilizan lectores de pantalla.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. Cuando utiliza un teclado para navegar por los checkboxs, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 4.1.2 Name, Role, Value (Level A)

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Contenido en esta página

Navegación de pie de página