Checkbox & Radio

Selection controls for single and multiple choice inputs.

Checkbox

<label>
  <input type="checkbox">
  Accept terms and conditions
</label>

Checkbox Group

Select your interests 
<fieldset>
  <legend>Select your interests</legend>
  <label>
    <input type="checkbox" name="interests" value="music">
    Music
  </label>
  <label>
    <input type="checkbox" name="interests" value="sports">
    Sports
  </label>
  <label>
    <input type="checkbox" name="interests" value="reading">
    Reading
  </label>
</fieldset>

Radio Buttons

Select size 
<fieldset>
  <legend>Select size</legend>
  <label>
    <input type="radio" name="size" value="small">
    Small
  </label>
  <label>
    <input type="radio" name="size" value="medium" checked>
    Medium
  </label>
  <label>
    <input type="radio" name="size" value="large">
    Large
  </label>
</fieldset>

Switch Toggle

Use role="switch" on a checkbox to style it as a toggle switch:

<label>
  <input type="checkbox" role="switch">
  Enable notifications
</label>

Switch States

<label>
  <input type="checkbox" role="switch" checked>
  Dark mode
</label>

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

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