Forms

Switch

A switch component in pure CSS, using the checkbox syntax.

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

Disabled#

<fieldset>  <label>  <input name="publish" type="checkbox" role="switch" disabled />  Publish on my profile  </label>  <label>  <input name="change-password" type="checkbox" role="switch" checked disabled />  Change my password at next login  </label> </fieldset>

Validation states#

<fieldset>  <label>  <input name="2fa" type="checkbox" role="switch" aria-invalid="false" />  Enable two-factor authentication  </label>  <label>  <input name="subscription" type="checkbox" role="switch" aria-invalid="true" />  Automatic subscription renewal  </label> </fieldset>

Edit this page on GitHub