Radio buttons en React Native, creados con Pressable
Guía de radio buttons en React Native
Radio button en React Native: grupo accesible sin librería | We.Inc
React Native no tiene componente radio. Crea un grupo de radio accesible con Pressable, accessibilityRole radio y accessibilityState checked. Vista previa en vivo y código.
El núcleo de React Native no tiene componente de radio button; su lista de interfaz de usuario solo incluye Button y Switch. Créalo con Pressable: dibuja un círculo exterior y un punto interior, guarda el valor seleccionado en el componente padre y da a cada opción accessibilityRole="radio" más accessibilityState={{ checked }}. Envuelve el conjunto en un View con accessibilityRole="radiogroup".
Props de accesibilidad para un grupo de radio
Elemento
Prop
Valor
View contenedor
accessibilityRole
"radiogroup"
Cada opción
accessibilityRole
"radio"
Cada opción
accessibilityState
{ checked: true o false }
Opción desactivada
accessibilityState
{ disabled: true }, más la prop disabled de Pressable
Alternativa más reciente
role / aria-checked
role="radio" con aria-checked; role tiene prioridad sobre accessibilityRole
Abajo tienes una versión web del mismo grupo: usa los roles ARIA equivalentes, así que las flechas del teclado mueven la selección igual que en un grupo de radio del navegador. Debajo, el panel muestra las props que llevaría cada opción en React Native con la selección actual, para que veas qué se le comunica a un lector de pantalla.
El componente padre guarda un valor en el estado; cada opción se compara con él.
Al pulsar una opción se invoca onChange con su propio valor, lo que deselecciona las demás automáticamente.
Cada Pressable se anuncia como radio e informa de checked mediante accessibilityState.
El View contenedor se marca como radiogroup y se etiqueta con la pregunta.
Haz que toda la fila se pueda pulsar, incluida la etiqueta, no solo el pequeño círculo.
Añade hitSlop o padding para que cada objetivo sea cómodo para el pulgar.
Usa el indicador pressed de la función de estilo para dar respuesta inmediata antes de que se actualice el estado.
Preselecciona un valor por defecto razonable solo cuando una respuesta sea realmente segura; si no, deja el grupo vacío y valídalo.
Cuando hay más de unas siete opciones, un dropdown suele leerse mejor que una columna de círculos.
Preguntas frecuentes
¿Hay un componente RadioButton en React Native?
No. La página oficial de componentes indica Button y Switch como los únicos controles de interfaz, así que los radios salen de tu propio código con Pressable o de un kit de UI que instales.
¿Cómo sabe un lector de pantalla que mi círculo es un radio button?
Define accessibilityRole="radio" en el Pressable y accessibilityState={{ checked: isSelected }}. La documentación describe el rol radio como un radio button y radiogroup como un grupo de ellos.
¿Debería usar role y aria-checked en su lugar?
Cualquiera de las dos opciones funciona. React Native también acepta role="radio" y aria-checked, y la documentación dice que role tiene prioridad sobre accessibilityRole cuando se definen ambos. Elige un estilo y úsalo en toda la aplicación.
¿Radio buttons o un Switch?
Un Switch sirve para un único ajuste de activado y desactivado que se aplica al momento. Los radios sirven para elegir exactamente una entre varias opciones con nombre.
Por qué crearlo tú mismo
Un grupo de radio es poco código: una fila, dos círculos y una comparación. Escribirlo tú significa que encaja con tu diseño, no añade nada al bundle y lleva exactamente las props de accesibilidad que elijas.
Guardar el valor seleccionado en el componente padre convierte el grupo en un componente controlado, así que encaja en el objeto de valores de un formulario igual que un TextInput.
Cómo dibujar el círculo
Usa un View con el mismo ancho y alto, un borde y un borderRadius de la mitad del tamaño para el anillo. Dentro, dibuja un View relleno más pequeño solo cuando la opción esté seleccionada.
Mantén el anillo visible en ambos estados y cambia solo el punto. Una selección que se indica solo con el color es difícil de ver para las personas con daltonismo.
Código del grupo de radio
Componente RadioGroup
Solo componentes del núcleo. El padre pasa value y onChange, exactamente igual que con un TextInput controlado.
Cómo usarlo en una pantalla
El estado vive en la pantalla, así que la elección se puede validar y enviar con el resto de un formulario.
Envío estándar
Envío urgente
Recogida en tienda
Vista previa del grupo de radio
Método de entrega
Haz clic en una opción o usa las flechas del teclado cuando el grupo tenga el foco.