<section class="demo-section">
  <h2>Choice controls</h2>

  <h3>Checkbox</h3>
  <div class="demo-row">
    <label class="checkbox">
      <input type="checkbox" checked />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Checked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Unchecked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" checked disabled />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Disabled checked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" disabled />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Disabled</span>
    </label>
  </div>

  <h3>Radio</h3>
  <div class="demo-row">
    <div class="form-group radio-group">
      <label class="radio">
        <input type="radio" name="demo-radio" value="a" checked />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option A</span>
      </label>
      <label class="radio">
        <input type="radio" name="demo-radio" value="b" />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option B</span>
      </label>
      <label class="radio">
        <input type="radio" name="demo-radio" value="c" disabled />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option C disabled</span>
      </label>
    </div>
  </div>

  <h3>Switch</h3>
  <div class="demo-row">
    <label class="switch">
      <input type="checkbox" checked />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Enabled</span>
    </label>
    <label class="switch">
      <input type="checkbox" />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Disabled state</span>
    </label>
    <label class="switch">
      <input type="checkbox" checked disabled />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Disabled on</span>
    </label>
  </div>
</section>