=== Background goal
The current Codex library [[https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=2547%3A28279|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.
==== User stories
- As a user I need to know when a Text Input has an error and how to solve it.
==== Previous implementations
- **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 [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#:~:text=MultilineTextInput%2C%20SearchInput%2C%20NumberInput-,TextInputWidget,-TextInputWidget%20(icon) | here ]]
==== Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
| Component spec sheet |
==== Development considerations
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.
==== Acceptance criteria
**Design**
[] Update Figma spec sheet (if needed) and add link in this task
[] Update [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=2547%3A28279&viewport=-1292%2C-1298%2C0.32 | Figma library ]] component (if needed)
[] Add missing error text input in the DSG T302064
**Code**
[] Implement error text link in Codex