Form help and error text should not be separate
Problem
For our form elements, help text and error text are currently defined as two separate text items. This could be confusing as error text could be partially duplicative of the help text. Depending on how the help text is tied to the input for accessibility, this could also add confusion, or cause some info to be missed. Because the help text remains gray, it visually feels disconnected with an input in error state.
Solution
Help text is a single, dynamic text block with the potential for multiple states.
- By default it is instructional and in a neutral palette
- When an error occurs the help text becomes more explanatory so that a user knows how to correct the error. The danger palette is used.
In this case there is inly one help text block for instruction and error prevention.
Before | After |
---|---|