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

WIP -- ATM: As part of the label add
-- If one option is required “(select one or more options that apply)” (substitute one for two, etc.)
-- Else “(select all that apply)”

Single checkbox

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group" id="change-checkbox-example-1">  
  <legend class="asp-form__label">Confirmation</legend>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-1-yes" name="checkbox-example-1-ye" type="checkbox" value="checkbox-example-1-yes">  
    <label class="form__label-choices" for="checkbox-example-1-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

<fieldset class="asp-form__group" id="change-checkbox-example-2">  
  <legend class="asp-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-2a-suspect-1" name="checkbox-example-2a-suspect-1" type="checkbox" value="checkbox-example-2-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-2a-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-2a-suspect-2" name="checkbox-example-2a-suspect-2" type="checkbox" value="checkbox-example-2-suspect-2">  
    <label class="form__label-choices" for="checkbox-example-2a-suspect-2">Suspect 2</label>  
  </div>  
</fieldset>

Checkboxes with hint

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group" id="change-checkbox-example-3">  
  <legend class="asp-form__label">Select suspects relevant to witness (select all that apply)</legend>  
  <p class="asp-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-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-completed" name="checkbox-example-3-completed" type="checkbox" value="checkbox-example-3-completed">  
    <label class="form__label-choices" for="checkbox-example-3-completed">Suspect 2</label>  
  </div>  
</fieldset>

Checkboxes with error

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group asp-form__group--error" id="change-checkbox-example-4">  
  <legend class="asp-form__label">Select suspects relevant to witness (select one or more options that apply)</legend>  
  <p class="asp-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>

Checkboxes with hint and submission error

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group asp-form__group--error" id="change-checkbox-example-5">  
  <legend class="asp-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="asp-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-5-suspect-1" name="checkbox-example-5-suspect-1" type="checkbox" value="checkbox-example-5-suspect-1">  
    <label class="form__label-choices" for="checkbox-example-5-suspect-1">Suspect 1</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-5-suspect-2" name="checkbox-example-5-suspect-2" type="checkbox" value="checkbox-example-5-suspect-2">  
    <label class="form__label-choices" for="checkbox-example-5-suspect-2">Suspect 2</label>  
  </div>  
</fieldset>

Single checkbox to show conditional required text input

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group" id="change-checkbox-example-6">  
  <legend class="asp-form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="asp-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-example-6-required" name="checkbox-example-6-required" type="checkbox" value="checkbox-example-6-required">  
    <label class="form__label-choices" for="checkbox-example-6-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-6-completed" name="checkbox-example-6-completed" type="checkbox" value="checkbox-example-6-completed">  
    <label class="form__label-choices" for="checkbox-example-6-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent="checkbox-example-6-completed" data-child-required>  
    <div class="asp-form__group" id="checkbox-example-6-child">  
      <label class="asp-form__label" for="checkbox-example-6-text-input">Reason <noscript>(required if "Was THRIVE assessment" is "Completed")</noscript></label>  
      <input class="form__input" id="checkbox-example-6-text-input" type="text">  
    </div>  
  </div>  
</fieldset>

Multiple checkboxes to show conditional optional textarea

Open this example in a new tab: checkboxes

<fieldset class="asp-form__group" id="change-checkbox-example-7">  
  <legend class="asp-form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="asp-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-example-7-required" name="checkbox-example-7-required" type="checkbox" value="checkbox-example-7-required">  
    <label class="form__label-choices" for="checkbox-example-7-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-7-completed" name="checkbox-example-7-completed" type="checkbox" value="checkbox-example-7-completed">  
    <label class="form__label-choices" for="checkbox-example-7-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent="checkbox-example-7-required,checkbox-example-7-completed">  
    <div class="asp-form__group" id="checkbox-example-7-child">  
      <label class="asp-form__label" for="checkbox-example-7-textarea">Reason (optional)</label>  
      <textarea class="form__textarea" id="checkbox-example-7-textarea" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>  
      <p id="checkbox-example-7-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

<fieldset class="asp-form__group" id="change-checkbox-example-8">  
  <legend class="asp-form__label">Was THRIVE assessment: (select all that apply)</legend>  
  <p class="asp-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-example-8-required" name="checkbox-example-8-required" type="checkbox" value="checkbox-example-8-required">  
    <label class="form__label-choices" for="checkbox-example-8-required">Required</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--checkbox" id="checkbox-example-8-completed" name="checkbox-example-8-completed" type="checkbox" value="checkbox-example-8-completed">  
    <label class="form__label-choices" for="checkbox-example-8-completed">Completed</label>  
  </div>  
  <div class="form__indent" data-parent="checkbox-example-8-completed">  
    <div class="asp-form__group" id="checkbox-example-8-child">  
      <label class="asp-form__label" for="checkbox-example-8-select">Reason (optional)</label>  
      <select class="form__input" id="checkbox-example-8-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 -- For no JS fallback (on conditional content):
-- the conditional content will show (by default)
-- add in noscript text to the label (required if “Question [parent Label]” is “Option to reveal conditional content”) -- which can be multiple options/checkboxes

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

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 9 May 2024
Last updated 31 October 2025