Checkbox

Custom-styled checkbox using BEM markup. Requires specific HTML structure with hidden input + label.

Default

I accept the terms of service

<div class="nano-checkbox">
  <input type="checkbox" id="terms" class="nano-checkbox__input" name="terms">
  <label for="terms" class="nano-checkbox__label">I accept the terms of service</label>
</div>

Checked

Subscribe to newsletter

<div class="nano-checkbox">
  <input type="checkbox" id="newsletter" class="nano-checkbox__input" name="newsletter" checked>
  <label for="newsletter" class="nano-checkbox__label">Subscribe to newsletter</label>
</div>

Disabled

Disabled checkbox

<div class="nano-checkbox">
  <input type="checkbox" id="disabled" class="nano-checkbox__input" disabled>
  <label for="disabled" class="nano-checkbox__label">Disabled checkbox</label>
</div>