Use radio when there are five or fewer options to display simultaneously. Use a Select instead when the user needs to choose from a much longer list of familiar and/or quantitative options.
States
Radio supports different states: unselected, selected, focused, and disabled. 
<div class="form-field">
    <input type="radio">
    <label>Radio default</label>
</div>

<div class="form-field">
    <input type="radio" disabled>
    <label>Radio disabled</label>
</div>

<div class="form-field">
    <input type="radio" checked>
    <label>Radio checked</label>
</div>

<div class="form-field">
    <input type="radio" checked disabled>
    <label>Radio checked disabled</label>
</div>
General guidelines
  • Use one field per line.

  • A label should clearly and concisely describe the purpose of the field with no more than a few words.
Structure
1
Radio: Indicates the status of the button.
2
Label: Describe the option.
DO
  • Ensure the radio buttons are stacked vertically with five or fewer options. If more than five options are presented, consider using the Select or Combobox components.
  • Treat each option as a new sentence. Use sentence case.
DON'T
  • Don't align radio buttons horizontally as it is more difficult to scan.
  • The colon after the label stops the eye from scanning.
  • Full stops not needed after each option.