Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.

Checkbox

The 2-state checkbox in its native format

The checkbox class is a simple wrapper around the <input type="checkbox"> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.

Remember me

<label class="checkbox">
  <input type="checkbox" />
  Remember me
</label>

You can add links to your checkbox, or even disable it.

I agree to the terms and conditions

<label class="checkbox">
  <input type="checkbox" />
  I agree to the <a href="#">terms and conditions</a>
</label>

Save my preferences

<label class="checkbox" disabled>
  <input type="checkbox" disabled />
  Save my preferences
</label>

List of Checkboxes #

If you want to list several checkbox elements, wrap them in a <div class="checkboxes"> element:

<div class="checkboxes">
  <label class="checkbox">
    <input type="checkbox" />
    Monday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Tuesday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Wednesday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Thursday
  </label>

  <label class="checkbox">
    <input type="checkbox" />
    Friday
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    Saturday
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    Sunday
  </label>
</div>