Readonly on checkboxes and radio buttons

[MontseTelefonica]

Goal

Mejorar la legibilidad en los radio buttons y checkbox que tengan label.

Context

En el CMS, exiten varios pasos de contenido que una vez que se configura ya no se puede editar. Para estos casos usamos el readonly en los campos de texto, pero los radio buttons y checkbox no disponen de una característica readonly y se muestran como desabilitados, lo que dificulta la legibilidad al mostrarse con opacidad 5o%

Impact

Al permitir tener un tipo de radio button y checkbox label readonly se podría mantener la funcionalidad con opacidad 50% pero los labels tendría opacidad 100% para poder leerse con facilidad

Discussion Questions

-Tiene sentido añadir este tipo de comportamiento a Mistica o debería ser una decisión de producto

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/xNUwhH29z3Fre4foNltgtX/CPS_Specs?type=design&node-id=10308-187248&t=x6anH6eoIZ5I62ow-4

[aweell]

Buenas @MontseTelefonica!

Sería posible ver este caso un poco más en contexto? Con el flujo entero de donde parte el usuario y a donde va?

[MontseTelefonica]

Hola! El pantallazo adjunto es un caso real pero más que analizar un caso en concreto que próximamente será revisado por completo, lo que nos preguntamos es si tiene sentido que exista un esta readonly para los radio buttons y los checkboxs que no ponga el texto con opacidad por tema de legibilidad.

Te he pegado aquí las 2 versiones de la misma página, una en modo creación con todos los campos habilitados y otra en modo edición con los campos en readonly.
https://www.figma.com/file/L4fH44yIy2r7skUmCfFpLS/Untitled?type=design&node-id=0%3A1&mode=design&t=ti9mi3dqSOCYp0vt-1

[aweell]

Buenas!

Aunque nativamente no existe ninguna solución a este problema, es una solución recurrente que he visto aparecer por varios sitios. Me preguntaba primero si es algo que se puede resolver de manera que cuando quiera mostrar la información que aplica si que se pueda usar el control, se haga en un texto plano: https://tinyurl.com/22467v3l

Cierto es que para los radios es algo mas complejo.

Otra solución posible es no utilizar los controles cuando el estado es solo lectura, de este modo no existe confusión sobre si se puede o no interactuar con el control, la información es únicamente de lectura. En ese caso me pregunto, es importante que el usuario conozca aquellas opciones que por defecto no están marcadas?

En el caso de que fuera necesario crear una opción readonly, añado otra propuesta que no pase por cambiar la opacidad de ningún elemento:

https://www.figma.com/file/rOCR09vii0SHcDAcgzXuzs/Readonly-controls?type=design&node-id=0%3A1&mode=design&t=GG2XI2Azc2TWdjVu-1

[MontseTelefonica]

Para mi la opción propuesta abajo me encaja muy bien. Creo que es necesario poder ver las opciones no seleccionada también y el gris es la mejor manera de hacer entender que algo ya no es clicable.

[paulasuarezb]

Hola @MontseTelefonica ! 🙂 me estreno por aquí contigo.

Hemos estado dándole una vuelta a tu petición y vemos que el caso que nos comentas puede solucionarse planteando otra solución. Pensamos que puede resultar más interesante mostrar en el apartado del Product trype la descripción con los parámetros seleccionados previamente y, quizá, añadir un disclaimer que informe de que para cambiar algún parámetro habría que crear un nuevo producto. Con esto evitamos mostrar otras opciones que a las que el usuario no va a poder acceder y aportamos información de contexto.

[MontseTelefonica]

Hola @paulasuarezb, perdona que no había visto esto! Voy a plantear esta solución en el diseño y verlo con los devs. A ver que tal :) Gracias!