Intensify control errors

[yceballost]

Desde el equipo de COL (Canal Online - Movistar España) quieren reforzar el mensaje de error de los checkboxs haciendo que el borde el checkbox sea color error.

1. Actualmente no tenemos este error en los checkboxes si no que usamos un alert → https://ibit.ly/AtP-
2. Entiendo que este comportamiento debería llevarse a otros componentes como radio, switches e incluso input fields.
3. Puede ser excesivo si todos los elementos que puedan llevar errores lo tintamos de rojo en un formulario?

[aweell]

1. Quizás sea demasiado intrusivo un alert para este caso, además una de las cosas que ocurren es que si tengo algún error en el formulario si me indica que lo corrija y cuando todo está corregido me indica que tengo un error en el checkbox, haciéndome cerrar un alert para corregirlo, consideraría mas cómodo que todos los errores restantes me aparezcan al darle a continuar.
2. En los input fields no sería necesario no? Lo único que tocaría es desacoplar el mensaje de error del helper text. Para el resto de casos:

• En el radio button lo contemplaría como candidato a tener estado de error.
• El switch al ser una acción inmediata y su modificación no estar sujeta al proceso de submit evitaría tener mensajes de error (Si no se va a poder activar o desactivar algo en determinado momento, quizás el switch no es el componente adecuado a usar).

3. Aunque pueda parecer excesivo, que el mensaje de error aparezca asociado a cada uno de los elementos de un formulario me parece mejor práctica que un mensaje para todos los elementos que tengan error o un alert que no me permita marcar ese elemento sin cerrarlo primero para continuar. Los casos además en los que se vea todo el formulario en rojo son escasos.

------Editado----------

4. Añado aquí otra variable: que ocurre cuando tengo más de un checkbox, se deberían mostrar cada uno con su mensaje de error o uno general para el grupo? Mi idea aquí en que sea posible agrupar varios checkboxes (o radio buttons) dentro de un grupo mediante el cual se controla el error.

5. No dejaría el color como único indicativo de que existe error en un campo, lo conveniente en estos casos sería añadir un icono que indique error al lado del texto.

[yceballost]

los inputs me refería a que .. si en un checkbox marcamos su borde en rojo... deberían los inputs marcar el borde también en rojo?

[aweell]

De momento no entraría a valorar visualmente el estado error de inputs / radios / checkboxes y centraría el tiro en añadir un mensaje de error. Ahora mismo un input vacío sin foco y con error sólo se diferencia de uno sin error en el texto, mantendría la misma casuística para estos dos nuevos elementos añadiendo el icono. En posteriores iteraciones si valoraría el cambio visual a nivel de todos los elementos de formulario.

[raulredondoj]

rojo que te la cojo, yo no marcaría en rojo el campo, ni el check: ya añadimos el color al label y al mensaje de error... (otro asunto sería resaltar más el checkbox ya sea en tamaño o contraste.)

Podemos mirar lo de añadir un icono como refuerzo. También quitaría el alert porque solo funciona si el check es el único dato obligatorio.

Agrupar mensajes de error es más accesible y dejaría la UI más limpia en caso de marcar todo como error.

[yceballost]

Hemos hablado que de momento hagamos la tarea de habilitar textError en checkboxes y radio y añadir la opción de que puedan existir errores de grupos de checkboxes o radios.

Pendiente de validar con dev