import { Badge } from 'terra-form-checkbox/package.json?dev-site-package';

<Badge />

# Terra Form Checkbox Upgrade Guide

## Changes from version 3 to version 4

### Props

#### Updated
* Form Fields allowed the `label` to be a node, which potentially breaks the display when injecting other non-inline-only text elements (terra-text) or has the potential to completely break accessibility if something non-text based would be passed in.
* `labelText` prop's type changed from node to string.
* `legend` prop's type changed from node to string.

##### Steps to Update
 To upgrade from 3.0 to 4.0 each existing Checkbox must be reviewed and updated to ensure only a string is being passed to the `labelText` and `legend ` props. Solutions passing node data types need to be reworked to provide only a string.

## Changes from version 2 to version 3

### Changes to CSS Custom Properties

#### Renamed
| Previous | New |
|-|-|
| --terra-form-checkbox-background-color | --terra-form-checkbox-before-background-color |
| --terra-form-checkbox-background-image | --terra-form-checkbox-before-background-image |
| --terra-form-checkbox-border | --terra-form-checkbox-before-border |
| --terra-form-checkbox-border-radius | --terra-form-checkbox-before-border-radius |
| --terra-form-checkbox-height | --terra-form-checkbox-before-height |
| --terra-form-checkbox-margin-top | --terra-form-checkbox-before-margin-top |
| --terra-form-checkbox-transition | --terra-form-checkbox-before-transition |
| --terra-form-checkbox-width | --terra-form-checkbox-before-width |
| --terra-form-checkbox-checked-background-color | --terra-form-checkbox-checked-before-background-color |
| --terra-form-checkbox-checked-background-image | --terra-form-checkbox-checked-before-background-image |
| --terra-form-checkbox-checked-border | --terra-form-checkbox-checked-before-border |
| --terra-form-checkbox-checked-border-radius | --terra-form-checkbox-checked-before-border-radius |
| --terra-form-checkbox-symbol | --terra-form-checkbox-checked-before-content |
| --terra-form-checkbox-checked-height | --terra-form-checkbox-checked-before-height |
| --terra-form-checkbox-checked-line-height | --terra-form-checkbox-checked-before-line-height |
| --terra-form-checkbox-margin-top | --terra-form-checkbox-checked-before-margin-top |
| --terra-form-checkbox-checked-symbol-padding-left | --terra-form-checkbox-checked-before-padding-left |
| --terra-form-checkbox-checked-symbol-padding-right | --terra-form-checkbox-checked-before-padding-right |
| --terra-form-checkbox-checked-symbol-padding-top | --terra-form-checkbox-checked-before-padding-top |
| --terra-form-checkbox-checked-transform | --terra-form-checkbox-checked-before-transform |
| --terra-form-checkbox-checked-transition | --terra-form-checkbox-checked-before-transition |
| --terra-form-checkbox-checked-width | --terra-form-checkbox-checked-before-width |
| --terra-form-checkbox-is-mobile-height | --terra-form-checkbox-is-mobile-before-height |
| --terra-form-checkbox-is-mobile-margin-top | --terra-form-checkbox-is-mobile-before-margin-top |
| --terra-form-checkbox-is-mobile-width | --terra-form-checkbox-is-mobile-before-width |
| --terra-form-checkbox-is-mobile-checked-height | --terra-form-checkbox-is-mobile-checked-before-height |
| --terra-form-checkbox-is-mobile-checked-line-height | --terra-form-checkbox-is-mobile-checked-before-line-height |
| --terra-form-checkbox-is-mobile-margin-top | --terra-form-checkbox-is-mobile-checked-before-margin-top |
| --terra-form-checkbox-is-mobile-checked-width | --terra-form-checkbox-is-mobile-checked-before-width |
| --terra-form-checkbox-hover-border-color | --terra-form-checkbox-hover-before-border-color |
| --terra-form-checkbox-hover-border-width | --terra-form-checkbox-hover-before-border-width |
| --terra-form-checkbox-checked-hover-border-color | --terra-form-checkbox-hover-checked-before-border-color |
| --terra-form-checkbox-checked-hover-border-width | --terra-form-checkbox-hover-checked-before-border-width |
| --terra-form-checkbox-disabled-background-color | --terra-form-checkbox-disabled-before-background-color |
| --terra-form-checkbox-disabled-background-image | --terra-form-checkbox-disabled-before-background-image |
| --terra-form-checkbox-disabled-border-color | --terra-form-checkbox-disabled-before-border-color |
| --terra-form-checkbox-disabled-border-width | --terra-form-checkbox-disabled-before-border-width |
| --terra-form-checkbox-checked-disabled-border-width | --terra-form-checkbox-checked-disabled-before-border-width |
| --terra-form-checkbox-disabled-symbol | --terra-form-checkbox-checked-disabled-before-content |
| --terra-form-checkbox-focus-border-color | --terra-form-checkbox-focus-before-border-color |
| --terra-form-checkbox-focus-border-width | --terra-form-checkbox-focus-before-border-width |
| --terra-form-checkbox-focus-ring-background-color | --terra-form-checkbox-focus-after-ring-background-color |
| --terra-form-checkbox-focus-ring-border-radius | --terra-form-checkbox-focus-after-ring-border-radius |
| --terra-form-checkbox-focus-ring-height | --terra-form-checkbox-focus-after-ring-height |
| --terra-form-checkbox-focus-ring-left | --terra-form-checkbox-focus-after-ring-left |
| --terra-form-checkbox-focus-ring-top | --terra-form-checkbox-focus-after-ring-top |
| --terra-form-checkbox-focus-ring-width | --terra-form-checkbox-focus-after-ring-width |
| --terra-form-checkbox-field-error-icon | --terra-form-checkbox-field-error-background |

#### Added
* --terra-form-checkbox-field-label-error-icon-margin-right

#### Removed
* --terra-form-checkbox-field-label-error-icon-padding-right