Background
In order to make the error states easier to scan in a form, we could consider updating the background to background-color-error-subtle.
If we decide to update it, we should apply this change to:
- Text input
- Text area
- Select
- Combobox
- Checkbox
- Radios
- ChipInput
- Lookup
User stories
- As a user, I need the error states in a form to be as recognizable as possible.
Decisions
- Ultimately, we should not be relying on the visual style of the input itself to convey an error, but the error message below an input, as a part of a field.
- For those who can see this newly proposed error style which gives the input a subtle red background, and changes text and icons within a given input to red as well, it is additional visual guidance that something is wrong and needs to be fixed, especially when scanning a form or page, since the contrast between a default or focused border and an error border is less than 1.5:1.
- Since, for those who can see the updated subtle background, it adds a stronger visual notation in the UI, we should reconsider what native error behavior we build into Codex components, which will be done in T378389: Investigate default error behavior of Codex components in light of updated error styles.
Acceptance criteria (or Done)
Design
- Update the component in the Figma library. This step will be done by a DST member. (this is included in T377977)
Code
- Implement the components in Codex (this is included in T377977)