- A-Z
- Accordion
- Acronym
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Single checkbox
- Multiple checkboxes
- Checkboxes with hint
- Checkboxes with error
- Checkboxes with hint and submission error
- Single checkbox to show conditional required text input
- Multiple checkboxes to show conditional optional textarea
- Single checkbox to show conditional optional select
- When to use this component
- When not to use this component
- Other variants
- Confirmation
- Cookie banner
- Copy
- Date input
- Details
- Env
- Error summary
- Filter
- Footer
- Forms
- Group
- Header
- Help
- Hero
- Hr
- Input
- Leave site
- Notification
- Pagination
- Progress
- Radios
- Select
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Textarea
- Time input
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.
Checkboxes
WIP -- It is usual for single checkboxes to be used for accepting terms, when the fieldset allows multiple selection of checkboxes use “Select all that apply” as a hint.
Single checkbox
<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
<fieldset class="asp-form__group" id="change-checkbox-example-2">
<legend class="asp-form__label">Select suspects relevant to witness</legend>
<p class="asp-form__hint">Select all that apply</p>
<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
<fieldset class="asp-form__group" id="change-checkbox-example-3">
<legend class="asp-form__label">Select suspects relevant to witness</legend>
<p class="asp-form__hint">Select all that apply. 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
<fieldset class="asp-form__group asp-form__group--error" id="change-checkbox-example-4">
<legend class="asp-form__label">Select suspects relevant to witness</legend>
<p class="asp-form__hint">Select all that apply</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-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
<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">Select all that apply. 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
WIP -- When JavaScript is enabled, choosing an option in a parent control reveals any related child fields. When JavaScript is disabled, those child fields are always shown instead, but indented so the relationship is still clear.
If a user fills in a child field without selecting its parent (something that can happen in a non‑JavaScript journey), the form should validate this on submission and explain that the parent choice is required. This keeps the behaviour consistent, prevents accidental or mismatched answers, and avoids confusion.
Although this isn’t yet standard practice everywhere, it has been introduced in some systems and may become a recommended approach from early 2026.
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”)
<fieldset class="asp-form__group" id="change-checkbox-example-6">
<legend class="asp-form__label">Was THRIVE assessment:</legend>
<p class="asp-form__hint">Select all that apply. 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
<fieldset class="asp-form__group" id="change-checkbox-example-7">
<legend class="asp-form__label">Was THRIVE assessment:</legend>
<p class="asp-form__hint">Select all that apply. 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
<fieldset class="asp-form__group" id="change-checkbox-example-8">
<legend class="asp-form__label">Was THRIVE assessment:</legend>
<p class="asp-form__hint">Select all that apply. 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
The user can select one or more options, including cases where multiple selections are allowed.
A single selection (like “I agree to…”) is needed and is allowed to be removed.
Checkboxes work well when each option is independent and selecting several at once is valid.
When not to use this component
Don’t use checkboxes when selecting two or more options would create an invalid combination.
However, if the second option is only valid because the first one is selected, then this isn’t a case for avoiding checkboxes. Instead, treat the second option as conditional content. When the parent checkbox is ticked, show the child option underneath it. This makes the relationship clear and prevents users choosing the child without the parent.
This approach keeps the interaction simple, avoids invalid combinations, and makes the dependency obvious without removing the flexibility that checkboxes provide.
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 10 April 2026