Skip to main content

Chassis v5.4.0

Form radio buttons

Radio buttons.

Primary radio buttons

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

  <input
    id="primary-2"
    type="radio"
    name="primary"
    value="no"
    class="ch-radio"
  />
  <label
    for="primary-2"
    class="ch-ml--2 ch-radio__label ch-radio__label--primary"
  >
    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

Is your car an import?

Is your car a non-runner?

<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>