Standard radio buttons

<div class="ch-form__group">
  <input id="default-1" type="radio" name="default" value="yes" class="ch-radio" />
  <label for="default-1" class="ch-radio__label">Yes</label>

  <input id="default-2" type="radio" name="default" value="no" class="ch-radio" />
  <label for="default-2" class="ch-radio__label">No</label>
</div>

Radio button variants

<div class="ch-form__group">
  <input id="default-1" type="radio" name="default" value="yes" class="ch-radio" />
  <label
    for="default-1"
    class="ch-radio__label ch-radio__label--[success, primary, secondary, danger]"
  >
    Yes
  </label>

  <input id="default-2" type="radio" name="default" value="no" class="ch-radio" />
  <label for="default-2" class="ch-radio__label">No</label>
</div>

Large radio buttons

<div class="ch-form__group">
  <input id="large-1" type="radio" name="large" value="plan-1" class="ch-radio" />
  <label for="large-1" class="ch-radio__label ch-radio__label--large">
    Service plan 1
    <small>From £6 per month</small>
  </label>

  <input id="large-2" type="radio" name="large" value="plan-2" class="ch-radio" />
  <label for="large-2" class="ch-mt--2 ch-radio__label ch-radio__label--large">
    Service plan 2
    <small>From £8 per month</small>
  </label>

  <input disabled="true" id="large-3" type="radio" name="large" value="plan-3" class="ch-radio" />
  <label for="large-3" class="ch-mt--2 ch-radio__label ch-radio__label--large">
    Service plan 3
    <small>From £12 per month</small>
  </label>
</div>

Compact radio buttons

<div class="ch-form__group">
  <p class="ch-width--12 ch-form__control-label">Is your car an import?</p>
  <input id="import-1" type="radio" name="import" value="yes" class="ch-radio" />
  <label for="import-1" class="ch-radio__label ch-radio__label--compact">Yes</label>
  <input id="import-2" type="radio" name="import" value="no" class="ch-radio" />
  <label for="import-2" class="ch-ml--2 ch-radio__label ch-radio__label--compact">No</label>
</div>

<div class="ch-form__group">
  <p class="ch-width--12 ch-form__control-label">Is your car a non-runner?</p>
  <input id="non-runner-1" type="radio" name="non-runner" value="yes" class="ch-radio" />
  <label for="non-runner-1" class="ch-radio__label ch-radio__label--compact">Yes</label>
  <input id="non-runner-2" type="radio" name="non-runner" value="no" class="ch-radio" />
  <label for="non-runner-2" class="ch-ml--2 ch-radio__label ch-radio__label--compact">No</label>
</div>