Checkboxes

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-example-single">  
  <legend class="form__label">Confirmation</legend>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-single-yes" name="checkbox-example-single-ye" type="checkbox" value="checkbox-example-single-yes">  
    <label class="form__label-choices" for="checkbox-example-single-yes">I confirm that I have read and understood the <a href="#">Privacy policy</a> and <a href="#">Terms and Conditions</a></label>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-example-1">  
  <legend class="form__label">Select suspects relevant to witness (select all that apply)</legend>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-1a-suspect-1" name="checkbox-example-1a-suspect-1" type="checkbox" value="checkbox-example-1-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-1a-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-1a-suspect-2" name="checkbox-example-1a-suspect-2" type="checkbox" value="checkbox-example-1-suspect-2">  
    <label class="form__label-choices" for="checkbox-example-1a-suspect-2">Suspect 2</label>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-example-2">  
  <legend class="form__label">Select suspects relevant to witness (select all that apply)</legend>  
  <p class="form__hint">The witness may not be the victim</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-2-suspect-1" name="checkbox-example-2-suspect-1" type="checkbox" value="checkbox-example-2-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-2-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-2-completed" name="checkbox-example-2-completed" type="checkbox" value="checkbox-example-2-completed">  
    <label class="form__label-choices" for="checkbox-example-2-completed">Suspect 2</label>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group form__group--error" id="checkbox-example-3">  
  <legend class="form__label">Select suspects relevant to witness (select one or more options that apply)</legend>  
  <p class="form__error-message">"Select suspects relevant to witness" is required</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-3-suspect-1" name="checkbox-example-3-suspect-1" type="checkbox" value="checkbox-example-3-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-3-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-3-suspect-2" name="checkbox-example-3-suspect-2" type="checkbox" value="checkbox-example-3-suspect-2">  
    <label class="form__label-choices" for="checkbox-example-3-suspect-2">Suspect 2</label>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group form__group--error" id="checkbox-example-4">  
  <legend class="form__label">Select suspects relevant to witness (select one or more options that apply)</legend>  
  <p class="form__hint form__hint--error">The witness may not be the victim</p>  
  <p class="form__error-message">"Select suspects relevant to witness" is required</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-4-suspect-1" name="checkbox-example-4-suspect-1" type="checkbox" value="checkbox-example-4-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-4-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-4-suspect-2" name="checkbox-example-4-suspect-2" type="checkbox" value="checkbox-example-4-suspect-2">  
    <label class="form__label-choices" for="checkbox-example-4-suspect-2">Suspect 2</label>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-additional-example-1">  
  <legend class="form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="form__hint">Check "Completed" to show conditional required text input</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-1-required" name="checkbox-additional-example-1-required" type="checkbox" value="checkbox-additional-example-1-required">  
    <label class="form__label-choices" for="checkbox-additional-example-1-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-1-completed" name="checkbox-additional-example-1-completed" type="checkbox" value="checkbox-additional-example-1-completed">  
    <label class="form__label-choices" for="checkbox-additional-example-1-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent="checkbox-additional-example-1-completed" data-child-required>  
    <div class="form__group" id="checkbox-additional-example-1-child">  
      <label class="form__label" for="checkbox-additional-example-1-text-input">Reason <noscript>(required if "Was THRIVE assessment" is "Completed")</noscript></label>  
      <input class="form__input" id="checkbox-additional-example-1-text-input" type="text">  
    </div>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-additional-example-2">  
  <legend class="form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="form__hint">Check both "Completed" and "Required" to show conditional optional textarea</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-2-required" name="checkbox-additional-example-2-required" type="checkbox" value="checkbox-additional-example-2-required">  
    <label class="form__label-choices" for="checkbox-additional-example-2-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-2-completed" name="checkbox-additional-example-2-completed" type="checkbox" value="checkbox-additional-example-2-completed">  
    <label class="form__label-choices" for="checkbox-additional-example-2-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent="[&quot;checkbox-additional-example-2-completed&quot;, &quot;checkbox-additional-example-2-required&quot;]">  
    <div class="form__group" id="checkbox-additional-example-2-child">  
      <label class="form__label" for="checkbox-additional-example-2-textarea">Reason (optional)</label>  
      <textarea class="form__textarea" id="checkbox-additional-example-2-textarea" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>  
      <p id="checkbox-additional-example-2-textarea-countdown">You can enter up to 3000 characters</p>  
    </div>  
  </div>  
</fieldset>

Open this example in a new tab: checkboxes

<fieldset class="form__fieldset form__group" id="checkbox-additional-example-3">  
  <legend class="form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="form__hint">Check "Completed" to show conditional optional select</p>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-3-required" name="checkbox-additional-example-3-required" type="checkbox" value="checkbox-additional-example-3-required">  
    <label class="form__label-choices" for="checkbox-additional-example-3-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-additional-example-3-completed" name="checkbox-additional-example-3-completed" type="checkbox" value="checkbox-additional-example-3-completed">  
    <label class="form__label-choices" for="checkbox-additional-example-3-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent-value="checkbox-additional-example-3-completed">  
    <div class="form__group" id="checkbox-additional-example-3-child">  
      <label class="form__label" for="checkbox-additional-example-3-select">Reason (optional)</label>  
      <select class="form__input" id="checkbox-additional-example-3-select">  
        <option>Select Network</option>  
        <option value="option-1" id="option-1">Option 1</option>  
        <option value="option-2" id="option-2">Option 2</option>  
      </select>  
    </div>  
  </div>  
</fieldset>