Checkboxes

Go to the installation documentation

Checkboxes

Do you own:

Checkboxes with hint

Do you own:

Select all that apply

Checkboxes with error message

Do you own:

Select options owned by you

Checkboxes with hint and error message

Do you own:

Select all that apply

Select options owned by you

        
<!-- Checkboxes -->
<form id="checkboxes" class="coop-form" novalidate>
  <h3>Checkboxes</h3>

  <fieldset id="checkbox-1" class="coop-form__row">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-1-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

        
<!-- Checkboxes with hint -->
<form id="checkboxes-hint" class="coop-form" novalidate>
  <h3>Checkboxes with hint</h3>

  <fieldset id="checkbox-2" class="coop-form__row" aria-describedby="checkbox-2-hint">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-2-hint" class="coop-form__hint">Select all that apply</p>
    <p id="checkbox-2-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

        
<!-- Checkboxes with error message -->
<form id="checkboxes-error" class="coop-form" novalidate>
  <h3>Checkboxes with error message</h3>

  <fieldset id="checkbox-3" class="coop-form__row" aria-describedby="checkbox-3-error">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-3-error" class="coop-form__error">Select options owned by you</p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

        
<!-- Checkboxes with hint and error message -->
<form id="checkboxes-hint-error" class="coop-form" novalidate>
  <h3>Checkboxes with hint and error message</h3>

  <fieldset id="checkbox-4" class="coop-form__row" aria-describedby="checkbox-4-hint checkbox-4-error">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-4-hint" class="coop-form__hint">Select all that apply</p>
    <p id="checkbox-4-error" class="coop-form__error">Select options owned by you</p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

Single checkbox

Single checkbox with hint

Descriptive hint goes here

Single checkbox with error message

Please accept the terms and conditions

Single checkbox with hint and error message

Please accept the terms and conditions

Descriptive hint goes here

        
<!-- Checkboxes single -->
<form id="checkboxes-single" class="coop-form" novalidate>
  <h3>Single checkbox</h3>

  <div class="coop-form__row">
    <p id="checkbox-5-error" class="coop-form__error" hidden></p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-5" id="checkbox-5-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-5-1" class="coop-form__label">I agree to the terms and conditions</label>
    </div>
  </div>
</form>

        
<!-- Single checkbox with hint -->
<form id="checkboxes-single-hint" class="coop-form" novalidate>
  <h3>Single checkbox with hint</h3>

  <div class="coop-form__row">
    <p id="checkbox-6-error" class="coop-form__error" hidden></p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-6" id="checkbox-6-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-6-hint">
      <label for="checkbox-6-1" class="coop-form__label">I agree to the terms and conditions</label>
      <p id="checkbox-6-hint" class="coop-form__hint">Descriptive hint goes here</p>
    </div>
  </div>
</form>

        
<!-- Single checkbox with error message -->
<form id="checkboxes-single-error" class="coop-form" novalidate>
  <h3>Single checkbox with error message</h3>

  <div class="coop-form__row">
    <p id="checkbox-7-error" class="coop-form__error">Please accept the terms and conditions</p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-7" id="checkbox-7-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-7-error">
      <label for="checkbox-7-1" class="coop-form__label">I agree to the terms and conditions</label>
    </div>
  </div>
</form>

        
<!-- Single checkbox with hint and error message -->
<form id="checkboxes-single-hint-error" class="coop-form" novalidate>
  <h3>Single checkbox with hint and error message</h3>

  <div class="coop-form__row">
    <p id="checkbox-8-error" class="coop-form__error">Please accept the terms and conditions</p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-8" id="checkbox-8-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-8-hint checkbox-8-error">
      <label for="checkbox-8-1" class="coop-form__label">I agree to the terms and conditions</label>
      <p id="checkbox-8-hint" class="coop-form__hint">Descriptive hint goes here</p>
    </div>
  </div>
</form>