Tipo 01
Vertical
Una opción por línea: la más fácil de leer.
Componentes Botones de opción
Botones de opción
Los botones de opción permiten elegir exactamente una opción de un grupo. Al marcar una, se desmarca la anterior.
Uso
Úsalos cuando hay de 2 a 5 opciones excluyentes y conviene verlas todas a la vez.
- Una sola respuesta entre pocas opciones visibles
- Formularios donde comparar opciones ayuda
- Varias respuestas: usa casillas
- Muchas opciones (más de 5–7): usa un menú desplegable
Principios
1
Excluyentes
Solo una puede estar marcada.
2
Visibles
Todas las opciones se ven sin abrir nada.
3
Con valor inicial
Conviene marcar la opción más común por defecto.
Tipos
Tipo 02
Horizontal
Opciones en fila, para respuestas muy cortas.
Tipo 03
Deshabilitado
La opción existe pero no está disponible.
Anatomía
- Círculo exterior
- Punto interior (seleccionado)
- Etiqueta
- Área táctil
Comportamiento
- Tocar la opción o su etiqueta la selecciona.
- Con teclado, las flechas cambian la opción dentro del grupo.
- Un grupo no se puede dejar sin selección una vez elegido.
Medidas
| Medida | Valor de referencia |
|---|---|
| Círculo | 20 dp, borde 2 dp |
| Punto interior | 10 dp |
| Área táctil | 48 × 48 dp (web: mín. 24 px) |
| Espacio con la etiqueta | 16 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Agrupa
fieldset y legend con el nombre del grupo.
Mismo name
Todos los radios del grupo comparten name.
Flechas
El navegador ya maneja las flechas si usas inputs nativos.