Radio

Label

Text associated with the radio input

Grouping

There must be more than one radio option for the experience to work

⭐️ Utilise radio to surface all inputs options, only being able to select one

⭐️ Radios with short labels can be align horizontally, but should usually be aligned vertically

Default selection

Start with a radio option selected

⭐️ This doesn't always have to be the first option, it can be the more likely option based on previous research and experiences

Style

Make sure radio is unique and stands out from other input options

Clickability

Consider what is clickable to make the radio option active (text label, container)

States

Radio can be default, active and disabled (see examples below)