At the moment, we just add a red underline. Let's consider adding an icon on the right side of the input as well. This is best for accessibility for those with color-blindness that find it hard to detect the difference between blue and red.
Also, we keep running into issues where the focused state (blue line) overrides the invalid state making it unclear that certain (mostly number) inputs are invalid as the user types.
Guidelines Example:
Components to update:
At the moment, we just add a red underline. Let's consider adding an icon on the right side of the input as well. This is best for accessibility for those with color-blindness that find it hard to detect the difference between blue and red.
Also, we keep running into issues where the focused state (blue line) overrides the invalid state making it unclear that certain (mostly number) inputs are invalid as the user types.
Guidelines Example:
Components to update: