表单

开关

纯 CSS 实现的开关组件，沿用复选框语法。

I agree to the TermsI want to receive updates

查看源码

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

禁用

Publish on my profileChange my password at next login

查看源码

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

验证状态

Enable two-factor authenticationAutomatic subscription renewal

查看源码

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