import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import image1 from '../../stories/assets/Docum_SDSS_Componentes/05_Boton_de_radio/01_Radio_Opciones.png'; import image2 from '../../stories/assets/Docum_SDSS_Componentes/05_Boton_de_radio/02_Radio_Anatomia_Controles.png'; import image3 from '../../stories/assets/Docum_SDSS_Componentes/05_Boton_de_radio/03_Radio_Anatomia_Posicion.png'; import image4 from '../../stories/assets/Docum_SDSS_Componentes/05_Boton_de_radio/04_Radio_Comportamiento.png'; # Botón de radio / Radio button Los botones de radio se utilizan para ofrecer al usuario un rango cerrado de **opciones** como respuesta a una pregunta, de las cuales solo puede elegir una. Las opciones de un botón de radio son mutuamente excluyentes y no permiten elecciones múltiples. Solo se puede seleccionar un botón de radio cada vez, y cuando se selecciona un nuevo radio, el anterior se deselecciona automáticamente.

En general es preferible usar botones de radio antes que otras opciones de selección como el selector desplegable ya que, aunque cumplen funciones parecidas, en este las opciones elegibles están visibles. No se recomienda usar el botón de radio cuando las opciones que se ofrecen son muchas. En este caso se recomienda utilizar el selector desplegable. Los botones de radio se pueden usar en estructuras más complejas como listas estructuradas o tablas, que permiten presentar las opciones de una manera más clara para el usuario. ### Contenido Si se presenta un grupo de botones de radio, como es lo habitual, se suele tener una **etiqueta del grupo** en la parte superior que identifica y describe al grupo y da guías al usuario para realizar la selección. Para esta etiqueta de grupo se recomienda usar un texto que indique claramente el contexto de la selección. Para las **etiquetas** de cada radio se recomienda usar frases cortas y concisas. Si los textos son demasiado largos, el excedente continuará en la siguiente línea. No se recomienda truncar los textos largos. Dada la naturaleza de este componente, se recomienda que haya un valor seleccionado por **defecto**, siempre que se pueda sugerir uno, pero nunca si la respuesta a este componente no es obligatoria para el usuario. ### Anatomía Los botones de radio se componen de un **texto** de etiqueta de grupo, y un conjunto de **controles** como círculos clicables que suponen la entrada de información, cada uno de los cuales tiene un **texto** asociado como etiqueta posicionado a su derecha con un padding de 8px.

El control del radio siempre estará **alineado** con la primera línea del texto. Tanto el control como la etiqueta están alineados por arriba, no se debe centrar el control y la etiqueta. Los grupos de botones de radio se pueden **distribuir vertical u horizontalmente** dependiendo de las necesidades del interfaz, aunque se recomienda la distribución vertical de los elementos para facilitar la lectura de las opciones.

En aquellos casos dónde las opciones presentadas sean frases largas, o tengan forma de respuesta a una pregunta, las opciones del botón de radio se presentan siempre en formato vertical. Para otro tipo de formularios y preguntas más sencillas, se podrían presentar también en horizontal siempre que se ofrezcan pocas opciones. Un ejemplo típico es el de preguntas con respuesta Sí/No. ### Comportamiento Los usuarios pueden **activar** las opciones de un grupo de botones de radio clicando tanto en el control del radio como en la etiqueta. Esta dualidad permite una mayor sencillez a la hora de usar este componente. Si se usa teclado, los usuarios pueden navegar entre las distintas opciones de un grupo con las teclas de «flecha arriba» y «flecha abajo». Para seleccionar una opción se puede realizar con la tecla «espacio» cuando el control deseado tiene el foco. Los botones de radio presentan así dos **valores**, seleccionado y deseleccionado. Solo un radio de un grupo puede estar seleccionado en cada momento. Cuando un control se selecciona, si hay otro previamente seleccionado, este se deselecciona automáticamente. Así pues, los **estados** del botón de radio son enabled, hover, focus, selected, disabled, error, skeleton y sus combinaciones.