Checkbox and radio button switch

Github Page

The simple example demonstrates how to style checkbox and radio button elements to look like on/off switches.

Examples

An unstyled checkbox

Label content

A checkbox switch

Label content

A radio button switch

Label content

A pre-checked switch

Label content

A disabled switch

Label content

A switch set to XL size

Label content

A switch set to LG size

Label content

A switch set to MD size

Label content

A switch set to SM size (default)

Label content

A switch set to XS size

Label content

Code

Markup

<div class="switch">
  <input
    class="switch__control"
    type="checkbox"
    name="example01"
    id="example01">
  <label class="switch__label" for="example01">
    <span class="switch__content">Label content</span>
  </label>
</div>

Github Page