Multistate small checkboxes
Use multistate small checkboxes to allow users to select one or more options from a list where options may also include extra information or be blocked. Where options won't include extra information or be blocked, use checkboxes.
Small checkbox
Option without extra information
When an option in a list has no extra information.
- HTML5
- JavaScript
<form class="multistate-checkbox">
<fieldset id="containers" class="field field--set">
<legend class="multistate-checkbox__title">
Tell us which containers were missed
<h6 class="multistate-checkbox__hint">Select all that apply.</h6>
</legend>
<div class="multistate-checkbox__parent">
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-all"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-all"
>All</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-0"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-0"
>Black recycling box</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-1"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-1"
>Black wheelie bin</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-2"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-2"
>Blue recycling bag</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-3"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-3"
>Brown food caddy</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
type="checkbox"
class="multistate-checkbox__input"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-title-and-hint-4"
data-random-id="small-checkbox-group-with-title-and-hint"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-title-and-hint-4"
>Green recycling box</label
>
</div>
</div>
</fieldset>
</form>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(
'.multistate-checkbox__input[data-random-id="small-checkbox-group-with-title-and-hint"]'
);
function areAllChecked() {
return !Array.from(checkboxes).some(
(checkbox) =>
checkbox.id !==
`option-small-checkbox-group-with-title-and-hint-all` &&
!checkbox.checked
);
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
if (
checkbox.id ===
`option-small-checkbox-group-with-title-and-hint-all`
) {
checkboxes.forEach((cb) => (cb.checked = this.checked));
} else {
document.getElementById(
`option-small-checkbox-group-with-title-and-hint-all`
).checked = areAllChecked();
}
});
});
});
Option with extra information
When an option in a list has extra information.
- HTML5
- JavaScript
<form class="multistate-checkbox">
<fieldset id="containers" class="field field--set">
<legend
id="multistate-checkbox-small-checkbox-group-with-extra-information__title"
class="multistate-checkbox__title"
>
Tell us which containers were missed
<h6 class="multistate-checkbox__hint">Select all that apply.</h6>
</legend>
<div class="multistate-checkbox__parent">
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-all"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-all"
>All</label
>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-0"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-0"
>Black recycling box</label
>
</div>
<p class="multistate-checkbox__extra-information">
Text that gives the users concisely written extra
information about the item.
</p>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-1"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-1"
>Black wheelie bin</label
>
</div>
<p class="multistate-checkbox__extra-information">
Text that gives the users concisely written extra
information about the item.
</p>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-2"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-2"
>Blue recycling bag</label
>
</div>
<p class="multistate-checkbox__extra-information">
Text that gives the users concisely written extra
information about the item.
</p>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-3"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-3"
>Brown food caddy</label
>
</div>
<p class="multistate-checkbox__extra-information">
Text that gives the users concisely written extra
information about the item.
</p>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-extra-information-4"
data-random-id="small-checkbox-group-with-extra-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-extra-information-4"
>Green recycling box</label
>
</div>
<p class="multistate-checkbox__extra-information">
Text that gives the users concisely written extra
information about the item.
</p>
</div>
</div>
<p
id="multistate-checkbox-small-checkbox-group-with-extra-information__error-label"
class="multistate-checkbox__error-label"
>
You need to tell us which containers were missed.
</p>
</fieldset>
</form>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(
'.multistate-checkbox__input[data-random-id="small-checkbox-group-with-extra-information"]'
);
function areAllChecked() {
return !Array.from(checkboxes).some(
(checkbox) =>
checkbox.id !==
`option-small-checkbox-group-with-extra-information-all` &&
!checkbox.checked
);
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
if (
checkbox.id ===
`option-small-checkbox-group-with-extra-information-all`
) {
checkboxes.forEach((cb) => (cb.checked = this.checked));
} else {
document.getElementById(
`option-small-checkbox-group-with-extra-information-all`
).checked = areAllChecked();
}
});
});
});
Blocked option
When an option in a list is blocked.
<form class="multistate-checkbox">
<fieldset id="containers" class="field field--set">
<legend
id="multistate-checkbox-small-checkbox-group-with-blocked-options__title"
class="multistate-checkbox__title"
>
You can’t report any containers
<h6 class="multistate-checkbox__hint">Short informative text.</h6>
</legend>
<div class="multistate-checkbox__parent">
<div class="multistate-checkbox__blocked-wrapper">
<div class="multistate-checkbox__label-wrapper">
<i class="multistate-checkbox__icon bcc-font_alert"></i>
<p class="multistate-checkbox__label">
Black recycling box
</p>
</div>
<p
class="multistate-checkbox__extra-information multistate-checkbox__warning"
>
You can't report this container as missed because you have
already done so within the last 24 hours.
</p>
</div>
<div class="multistate-checkbox__blocked-wrapper">
<div class="multistate-checkbox__label-wrapper">
<i class="multistate-checkbox__icon bcc-font_alert"></i>
<p class="multistate-checkbox__label">Black wheelie bin</p>
</div>
<p
class="multistate-checkbox__extra-information multistate-checkbox__warning"
>
You can't report this container as missed because your gate
was locked or access to your containers was blocked.
</p>
</div>
<div class="multistate-checkbox__blocked-wrapper">
<div class="multistate-checkbox__label-wrapper">
<i class="multistate-checkbox__icon bcc-font_alert"></i>
<p class="multistate-checkbox__label">Blue recycling bag</p>
</div>
<p
class="multistate-checkbox__extra-information multistate-checkbox__warning"
>
You can't report this container as missed because it
contained a prohibited item. Check
<a class="multistate-checkbox__link" href="#"
>what goes in your blue recycling bag</a
>.
</p>
</div>
<div class="multistate-checkbox__blocked-wrapper">
<div class="multistate-checkbox__label-wrapper">
<i class="multistate-checkbox__icon bcc-font_alert"></i>
<p class="multistate-checkbox__label">Brown food caddy</p>
</div>
<p
class="multistate-checkbox__extra-information multistate-checkbox__warning"
>
You can't report this container as missed because there was
business waste in it. Check what goes in your bins and
boxes.
</p>
</div>
<div class="multistate-checkbox__blocked-wrapper">
<div class="multistate-checkbox__label-wrapper">
<i class="multistate-checkbox__icon bcc-font_alert"></i>
<p class="multistate-checkbox__label">
Green recycling box
</p>
</div>
<p
class="multistate-checkbox__extra-information multistate-checkbox__warning"
>
You can't report this container as missed because the lid
would not close. Check
<a class="multistate-checkbox__link" href="#"
>what goes in your black wheelie bin</a
>.
</p>
</div>
</div>
<p
id="multistate-checkbox-small-checkbox-group-with-blocked-options__error-label"
class="multistate-checkbox__error-label"
>
You need to tell us which containers were missed.
</p>
</fieldset>
</form>
All options have the same extra information
Use a slate primary without title panel at the top of the checkbox list to display extra information if it's the same for all options. You can then remove the extra information from each option.
- HTML5
- JavaScript
<form class="multistate-checkbox">
<fieldset id="containers" class="field field--set">
<legend
id="multistate-checkbox-small-checkbox-group-with-the-same-information__title"
class="multistate-checkbox__title"
>
Tell us which containers were missed
<h6 class="multistate-checkbox__hint">Select all that apply.</h6>
</legend>
<div class="slate slate--primary">
<div class="slate__copy">
You can report your containers as missed for our records, but we
won't come back because your collections were more than one
working day ago. You need to tell us by 5pm the next day.
</div>
</div>
<div class="multistate-checkbox__parent multistate-checkbox__spacer">
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-all"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-all"
>All</label
>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-0"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-0"
>Black recycling box</label
>
</div>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-1"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-1"
>Black wheelie bin</label
>
</div>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-2"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-2"
>Blue recycling bag</label
>
</div>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-3"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-3"
>Brown food caddy</label
>
</div>
</div>
<div class="multistate-checkbox__wrapper">
<div class="multistate-checkbox__label-wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-the-same-information-4"
data-random-id="small-checkbox-group-with-the-same-information"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-the-same-information-4"
>Green recycling box</label
>
</div>
</div>
</div>
<p
id="multistate-checkbox-small-checkbox-group-with-the-same-information__error-label"
class="multistate-checkbox__error-label"
>
You need to tell us which containers were missed.
</p>
</fieldset>
</form>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(
'.multistate-checkbox__input[data-random-id="small-checkbox-group-with-the-same-information"]'
);
function areAllChecked() {
return !Array.from(checkboxes).some(
(checkbox) =>
checkbox.id !==
`option-small-checkbox-group-with-the-same-information-all` &&
!checkbox.checked
);
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
if (
checkbox.id ===
`option-small-checkbox-group-with-the-same-information-all`
) {
checkboxes.forEach((cb) => (cb.checked = this.checked));
} else {
document.getElementById(
`option-small-checkbox-group-with-the-same-information-all`
).checked = areAllChecked();
}
});
});
});
All options are blocked
Use a warning panel to tell the user that all options are blocked.
You can't report any containers as missed because you were not put out in time. Put them out by 6am on your next collection day.
<div class="warning">
<i class="warning__icon bcc-font_alert"></i>
<div class="warning__copy">
You can't report any containers as missed because you were not put out
in time. Put them out by 6am on
<a class="multistate-checkbox__link-panel" href="#"
>your next collection day.</a
>
</div>
</div>
With error
Display an inline error when there's something wrong. For example, when a user tries to proceed without selecting an option and the question is mandatory.
- HTML5
- JavaScript
<form class="multistate-checkbox">
<fieldset id="containers" class="field field--set">
<legend
id="multistate-checkbox-small-checkbox-group-with-error__title"
class="multistate-checkbox__title multistate-checkbox__error-title"
>
Tell us which containers were missed
<h6 class="multistate-checkbox__hint">Select all that apply.</h6>
</legend>
<div class="multistate-checkbox__parent">
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-all"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-all"
>All</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-0"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-0"
>Black recycling box</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-1"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-1"
>Black wheelie bin</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-2"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-2"
>Blue recycling bag</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-3"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-3"
>Brown food caddy</label
>
</div>
<div class="multistate-checkbox__wrapper">
<input
class="multistate-checkbox__input"
type="checkbox"
name="with-title-and-label-hint"
id="option-small-checkbox-group-with-error-4"
data-random-id="small-checkbox-group-with-error"
/><label
class="multistate-checkbox__label"
for="option-small-checkbox-group-with-error-4"
>Green recycling box</label
>
</div>
</div>
<p
id="multistate-checkbox-small-checkbox-group-with-error__error-label"
class="multistate-checkbox__error-label multistate-checkbox__display"
>
You need to tell us which containers were missed.
</p>
</fieldset>
</form>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(
`.multistate-checkbox__input[data-random-id="small-checkbox-group-with-error"]`
);
const title = document.getElementById(
`multistate-checkbox-small-checkbox-group-with-error__title`
);
const errorLabel = document.getElementById(
`multistate-checkbox-small-checkbox-group-with-error__error-label`
);
function areAllChecked(id) {
return !Array.from(checkboxes).some(
(checkbox) =>
checkbox.id !== `option-small-checkbox-group-with-error-all` &&
!checkbox.checked
);
}
function updateErrorState() {
const atLeastOneChecked = Array.from(checkboxes).some(
(checkbox) => checkbox.checked
);
if (!atLeastOneChecked && showError) {
title.classList.add("multistate-checkbox__error-title");
errorLabel.classList.add("multistate-checkbox__display");
} else {
title.classList.remove("multistate-checkbox__error-title");
errorLabel.classList.remove("multistate-checkbox__display");
}
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
if (checkbox.id === `option-small-checkbox-group-with-error-all`) {
checkboxes.forEach((cb) => (cb.checked = this.checked));
updateErrorState();
} else {
document.getElementById(
`option-small-checkbox-group-with-error-all`
).checked = areAllChecked(id);
updateErrorState();
}
});
});
updateErrorState();
});