Radio
A radio button is an interactive element that allows users to select a single option from a predefined set of choices.
Example
Illustrates the animations that happen in the radio 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 radio (on:Hover), the hover state $hover01 fades in at 200ms. When a user moves the mouse away (off:Hover) the hover state $hover01 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 radio (on:Click), the active state $active01 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 radio is selected the colour fill $interactive-brand scales from the centre 0-100%. The middle scales 0-100% at a slight offset of 50ms for a transition that takes 150ms in total.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Control | (.45, 0, .55, 1) | $easing-functional | Scales 0-100% at 100ms |
| Fill | (.45, 0, .55, 1) | $easing-functional | Scales 0-100% at 100ms |
Unselected
When a radio is unselected both the control and the fill scale down 100-0% at 100ms.
| Property | Cubic Bezier | Easing token | Notes |
|---|---|---|---|
| Control | (.45, 0, .55, 1) | $easing-functional | Scales 100-0% at 100ms |
| Fill | (.45, 0, .55, 1) | $easing-functional | Scales 100-0% at 100ms |