## Background
The error state in the [[ https://doc.wikimedia.org/codex/main/components/demos/checkbox.html | Codex Checkbox component ]] is missing. We need to implement the following missing states:
Unselected:
- `Error unselected`
- `Error-hover unselected` //(new token `border-color-error--hover` is needed)//
- `Error-focus unselected`
Selected:
- `Error selected` //(new token `background-color-error` is needed)//
- `Error-hover selected` //(new token `background-color-error--hover` is needed)//
- `Error-focus selected`
{F37671155}
The error state should be interactive like the non-error state. So we will need to create the following [[ https://www.figma.com/file/4TgJc6YalNKeDa9vSKHYZe/Checkbox?type=design&node-id=2021-13817&mode=design&t=iYjx3PQ1XPPuIUwa-11 | new color tokens ]] to use in these error states:
- `background-color-error`
- `background-color-error--hover`
- `border-color-error--hover`
### Known use cases
| {F37112710} | Checkboxes in the [[ https://www.figma.com/file/a1qk95sTQyVFDACoQfBsne/MTP?node-id=185%3A24593&mode=dev | T&S tools project ]] |
- Here is a link to the [[ https://www.figma.com/file/a1qk95sTQyVFDACoQfBsne/MTP?type=design&node-id=1%3A6001&mode=design&t=dbFFjheaEbODrMtF-1 | Figma file ]] where the Incident Reporting System is using check boxes in error state
### User stories
- As a user I need to use the Checkbox error state when checkbox selection is missing in a mandatory form field.
### Previous implementations
- **Codex demo:** Checkbox component in [[ https://doc.wikimedia.org/codex/main/components/demos/checkbox.html | Codex ]]
- **Design style guide:** Checkbox guidelines in the [[ https://design.wikimedia.org/style-guide/components/checkboxes.html | DSG ]]
- **OOUI:** Checkbox component in [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-inputs-binary | OOUI ]]
- **Vue:** /-
### Design spec
| [[ https://www.figma.com/file/4TgJc6YalNKeDa9vSKHYZe/Checkbox?type=design&node-id=101-2115&mode=design&t=aHPmEPykMPfcQa9g-0 | Component spec sheet ]] |
### Open questions
// Add here the questions to be answered in order to design and implement the component //
### Acceptance criteria (or Done)
**Design**
[-] Design the Figma spec sheet and add it in this task
[] Add new color tokens as styles in the [[ https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?type=design&node-id=902-3415&mode=design&t=p9tvmr0q7O05M66c-11 | Figma library ]] and use them to style the checkbox error states:
[] `background-color-error`
[] `background-color-error--hover`
[] border-color-error--hover`
[] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.//
**Code**
[] Create the new color tokens:
[] `background-color-error`
[] `background-color-error--hover`
[] border-color-error--hover`
[] Update the component in Codex