The current Codex library Figma spec sheet for the TextInput component specifies an error state (with sub-states for when the input is filled or focused while in the error state), but this isn't currently implemented.
We should consider how to implement this in TextInput, and how the responsibility for error state management and styling should be divided between TextInput (and other inputs), and the Field component specified in T309239.
- As a user I need to know when a Text Input has an error and how to solve it.
- Codex demo: https://doc.wikimedia.org/codex/main/components/demos/text-input.html
- Design style guide: https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html
- OOUI: previous text input in OOUI here
A validation message (text describing the nature of the error) will be implemented as part of the Field component T309239, which will contain an input and take in either a boolean error prop or a rule/function for checking validity. Because the Field component needs to be aware of whether an error is present in order to show the proper message, this validation must happen at the level of the Field component or above.
Therefore, the TextInput component should take in a boolean error prop which, when true, will enable error styles (e.g. the red border). Error text will not be a part of the TextInput component itself.
- Update Figma spec sheet (if needed) and add link in this task
- Update Figma library component and publish library (if needed)
- Add missing error text input in the DSG T302064
- Implement error text link in Codex
More details in this comment
- Error focus should use border-color-progressive--focus