Casilla de selección única (radio button)

[camilembo]

Casilla de selección única (Radio Button)

Nombre en Obelisco Botón de radio (dentro de Formularios)

Tipo de componente Molécula

Ejemplo en Bootstrap Checks and Radios

Requerimiento | Agosto 2024

Revisar accesibilidad del input de cara a la migración de Bootstrap 5 porque genera dependencias para la construcción de otros componentes.

[NicoAltamirano]

De cara a la migración a Bootstrap 5 se realizaron mejoras ágiles sobre el componente de casilla de selección única (botón de radio) con el objetivo de estandarizar su comportamiento con el checkbox.

Para esto se creó el componente base .Botón-radio a partir del cual se construye la molécula de casilla de selección única.

• Se incorporó el estado de Error
• Se modificó el estado En Foco para que tome el mismo comportamiento que el componente Checkbox.
• Se eliminó el gap de 4px entre el contenedor que engloba al input y la etiqueta para mejorar ópticamente los espaciados
• El input tiene un padding de 8px en todos los lados
• Se estableció un ancho máximo de 391 px. para la etiqueta del componente.

Evolutivos y puntos de dolor

• Analizar la accesibilidad del componente especialmente en el tamaño de los inputs.
• Analizar la creación de un organismo de lista para utilizar en formularios con un placeholder, texto de asistencia/validación y lista de opción de selección múltiple como se muestra en Storybook
• Actualizar especificaciones en la ficha y usos

[NicoAltamirano]

📢 Nuevo requerimiento

Issues relacionados

311 #309

Qué

Actualizar el componente para estandarizar el comportamiento con el checkbox.

Por qué

Pasamos por una instancia breve para hacer actualizaciones mínimas en componentes, y la actualización del componente Casilla de selección única nos quedaba pendiente para terminar de actualizar la Page de Formulario #309

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El componente se ajusta a la grilla 4px.
• [x] El componente tiene una medida definida para mobile, tablet y desktop. [no aplica para este componente]
• [x] El componente tiene una modulación definida para mobile, tablet y desktop. [no aplica para este componente]
• [x] El componente tiene su handoff para desarrollo y está marcado como ready for dev. [Lo incluye la página de Formularios]
• [x] El componente está documentado.

🕰️ Changelog

CHANGELOG	Descripción
Agregado	# Se incorporó el estado de Error. # Se estableció un ancho máximo de 391 px. para la etiqueta del componente.
Arreglado	El input tiene un padding de 8px en todos los lados
Eliminado	Se eliminó el gap de 4px entre el contenedor que engloba al input y la etiqueta para mejorar ópticamente los espaciados
Obsoleto	Cell
Cambiado	Se modificó el estado En Foco para que tome el mismo comportamiento que el componente Checkbox.

✏️ Notas

• [EV]:
• Analizar la accesibilidad del componente especialmente en el tamaño de los inputs.
• Analizar la creación de un organismo de lista para utilizar en formularios con un placeholder, texto de asistencia/validación y lista de opción de selección múltiple como se muestra en Storybook
• Actualizar especificaciones en la ficha y usos