Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Checkboxes

Single checkbox

Open this example in a new tab: checkboxes

Copy code: 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>

Multiple checkboxes

Open this example in a new tab: checkboxes

Copy code: 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>

Checkboxes with hint

Open this example in a new tab: checkboxes

Copy code: 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>

Checkboxes with error

Open this example in a new tab: checkboxes

Copy code: 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>

Checkboxes with hint and submission error

Open this example in a new tab: checkboxes

Copy code: 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>

Single checkbox to show conditional required text input

Open this example in a new tab: checkboxes

Copy code: 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>

WIP -- noscript text (required if “Question” is “Option to reveal conditional content”)

Multiple checkboxes to show conditional optional textarea

Open this example in a new tab: checkboxes

Copy code: 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="checkbox-additional-example-2-required,checkbox-additional-example-2-completed">  
    <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>

Single checkbox to show conditional optional select

Open this example in a new tab: checkboxes

Copy code: 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="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>

When to use this component

WIP -- When there are multiple selections.

When not to use this component

WIP -- If a user has the option to select only one option; use radios if there is 7 or less options, use a select if there is 8 or more options.

Other variants

See Radios for conditional text input / select / textarea options. Also hint and errors within conditional content

Submit a request

Request a change or addition to the design system use this form.

Published 9 May 2024
Last updated 23 June 2025