Radio
Se utiliza cuando tienes que elegir entre varias opciones mutuamente excluyentes.
Cuándo usar
Similar a los checkboxes, los Radio no activan una acción inmediatamente. Para hacerlo, debes 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
Los Radio no se pueden usar para cambiar entre contenido de página o de menú. Esta funcionalidad está soportada por los componentes radio-button y tab.
Estructura
1 — Elemento Radio, 2 — etiqueta explicativa
El Radio siempre se usa con una etiqueta que explica su significado.
La primera opción está seleccionada por defecto.
También puedes 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 usar un componente, te recomendamos que siempre selecciones 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 entradas, botones y otros elementos, entonces el radio debe ser del mismo tamaño.
Estados
Por defecto – cuando el usuario no interactúa con el elemento
Hover – al pasar el ratón sobre un elemento y una etiqueta de texto
Marcado – estado seleccionado
Deshabilitado – estado deshabilitado, cuando la opción seleccionada no está disponible para la interacción