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)