Radio

Se utiliza cuando hay que elegir entre varias opciones mutuamente excluyentes.

§Cuándo usar

Similar a checkbox, Radio no desencadena la acción inmediatamente. Para hacerlo, debe hacer clic en el botón de confirmación (Guardar / Aplicar / Enviar).

El texto explicativo en la etiqueta debe responder a la pregunta "¿Cómo?" o "¿Cuál?"

Cuándo no usar

Radio no puede utilizarse para cambiar entre contenido de página o menú. Esta funcionalidad es compatible con los componentes radio-button y tab.

§Estructura

1 — Elemento Radio, 2 — etiqueta explicativa

Radio siempre se utiliza con una etiqueta que explica su significado.

La primera opción está seleccionada por defecto.

También puede dejar los controles de alternancia sin seleccionar (cuando se eliminan todas las opciones).

Una vez que se ha seleccionado un elemento dentro de un grupo, el usuario no puede deseleccionarlo para devolver el grupo a su estado original (sin actualizar la página).

Al utilizar un componente, recomendamos que siempre seleccione la primera opción de la lista.

§Tamaños

Viene en dos tamaños: M y L. El tamaño del componente está determinado por el tamaño de los controles de la página. Por ejemplo, si la página utiliza el tamaño L para inputs, botones y otros elementos, entonces el radio debe ser del mismo tamaño.

§Estados

Default – cuando el usuario no interactúa con el elemento

Hover – al pasar el cursor sobre un elemento y una etiqueta de texto

Checked – estado seleccionado

Disabled – estado deshabilitado, cuando la opción seleccionada no está disponible para interacción