Switch

<label>
  <input type="checkbox" name="terms" role="switch">
  I agree to the Terms
</label>
<label>
  <input type="checkbox" name="opt-in" role="switch" checked>
  Receive news and offers
</label>

<label>
  <input type="checkbox" role="switch" disabled checked>
  Disabled
</label>
<label>
  <input type="checkbox" role="switch" disabled>
  Disabled
</label>

<label>
  <input type="checkbox" name="newsletter" role="switch" aria-describedby="newsletter-hint" checked>
  Newsletter
</label>
<small id="newsletter-hint">
  We will send you a news letter every week
</small>

<label>
  <input type="checkbox" role="switch" name="valid" aria-invalid="false" aria-describedby="valid-hint">
  Valid
</label>
<small id="valid-hint">
  Looks good!
</small>
<label>
  <input type="checkbox" role="switch" name="invalid" aria-invalid="true" aria-describedby="invalid-hint" checked>
  Invalid
</label>
<small id="invalid-hint">
  Please provide a valid value!
</small>