Checkbox
A checkbox is an interactive element that allows users to select or deselect an option.
Example
Illustrates the animations that happen in the checkbox component. In this component we have animations on hover and active states as well as when the component is selected and unselected.
Hover
When the user hovers over an unselected checkbox, the hover state $hover-01 fades in at 200ms. When a user moves the mouse away the hover state $hover-01 fades out at 200ms.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Hover 01 | (.45, 0, .55, 1) | $easing-functional | Hover 01 opacity 0-100% at 200ms |
Active
When the user clicks a checkbox, the active state $active-01 fades in at 100ms and then out at 100ms.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Active 01 | (.45, 0, .55, 1) | $easing-functional | Active 01 opacity 0-100% at 100ms |
Selected
When a checkbox is selected the colour fill $interactive-brand scales from the centre 0-100% and the tick path animates in, both at 150ms.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Tick | (.45, 0, .55, 1) | $easing-functional | Path animation at 150ms |
| Fill | (.45, 0, .55, 1) | $easing-functional | Scales 0-100% at 150ms |
Unselected
When a checkbox is unselected both the tick and the fill scale down 100-0% at 100ms.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Tick | (.45, 0, .55, 1) | $easing-functional | Scales 100-0% at 100ms |
| Fill | (.45, 0, .55, 1) | $easing-functional | Scales 100-0% at 100ms |