Use radios when users must pick exactly one value.

Usage

<label class="of-radio">
  <input type="radio" name="plan" class="of-radio__input" />
  <span class="of-radio__label">Monthly</span>
</label>

Examples

Accessibility

• Use a shared name attribute for related radios.
• Provide context with fieldset and legend.
• Keyboard users should navigate radios using arrow keys in grouped controls.