- A-Z
- Accordion
- 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
- Cookie banner
- Date input
- Details
- Forms
- Group
- Help
- Hero
- Leave site
- Notification
- Pagination
- Progress
- Radios
- Select
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Text input
- Textarea
- Time input
Checkboxes
Single checkbox
<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
<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
<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
<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
<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
<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
<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-completed", "checkbox-additional-example-2-required"]">
<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
<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
Published 9 May 2024
Last updated 4 November 2024