Checkbox

Custom styled stand-alone checkboxes or grouped with fieldset.

Single Checkbox

What is your favourite country?


<div class="checkbox">
<input type="checkbox" name="country" id="japan" />
<label for="japan">Japan</label>
</div>

Checkbox Set

What is your favourite country?
<fieldset>

  <legend>What is your favourite country?</legend>

  <div class="checkbox">
  <input type="checkbox" name="country" id="thailand" />
  <label for="thailand">Thailand</label>
  </div>

  <div class="checkbox">
  <input type="checkbox" name="country" id="vietnam" />
  <label for="vietnam">Vietnam</label> 
  </div>

  <div class="checkbox">
  <input type="checkbox" name="country" id="northernireland" />
  <label for="northernireland">Northern Ireland</label>
  </div>

</fieldset>

Checkbox Set with error

What is your favourite country?
Please select at least one option
<fieldset class="error">

  <legend>What is your favourite country?</legend>

  <div class="checkbox">
  <input type="checkbox" name="country" id="indonesia" />
  <label for="indonesia">Indonesia</label>
  </div>

  <div class="checkbox">
  <input type="checkbox" name="country" id="australia" />
  <label for="australia">Australia</label> 
  </div>

  <div class="checkbox">
  <input type="checkbox" name="country" id="unitedkingdom" />
  <label for="unitedkingdom">United Kingdom</label>
  </div>

 <div class="error-message">Please select at least one option</div>

</fieldset>

Checkbox Validation

You can validate a checkbox by passing it to the isCheckboxValid() function.

// checkbox: checkbox object
isCheckboxValid(checkbox)

To specify a minimum or maximum number allowed, use data-min and data-max attributes on the parent fieldset.

<fieldset data-min="2" data-max="5">