Checkbox multiselect
Taxonomic name: M-CHECKBOX-GROUP--MULTISELECT
Extension: FORMS-EXTENDED-A
v.4.14.0 - Updated 11/10/19. Archives
Molecule
Checkbox multiselects adapt a standard checkbox group to become a dropdown list. They allow users to select from a larger list of checkboxes and are preferable to a a standard group of checkboxes in these instances, as they keep pages shorter. Where there are more than five options available at desktop, or three at mobile, multiselects will automatically add a scrolling facility.
Checkboxes allow users to select none, one or more items from a list of options.
The default version of this component pushes down the content on the page when it is opened, but an additional variant is available which will allow the open component to overlay other content on the page instead - see 'overlay variant' example below.
- Checkboxes should behave independently from each other.
- A single checkbox should be used where a user needs to indicate agreement (for example to terms and conditions).
- The checkbox itself, and its container are clickable, to provide a larger target area.
- Checkbox labels may wrap to a maximum of two lines.
- Standard multiselects which push down down can show/hide content or form elements.
- Do not use for mutually exclusive options - use segmented controls or drop down lists instead.
- Do not use a negative statement for a checkbox label.
- Overlay variant multiselects must not show/hide content or form elements; if used incorrectly, content/form elements would have to either populate under the overlay or after the overlay, both of which would present confusing behaviour.
For documentation on standard checkboxes see our checkbox documentation.
Examples
Standard checkbox multiselect
Standard checkbox multiselect with scrollbar
Standard checkbox multiselect - overlay variant
Standard checkbox multiselect with scrollbar - overlay variant
Valid checkbox multiselect
Errored checkbox multiselect
Disabled checkbox multiselect
Notes for developers
Checkbox multiselects add their functionality with the simple addition of a data-module="m-multiselect"
tag within the m-checkbox-group
ul.
When creating a group of checkboxes they must be contained within their one fieldset where the legend is the question for the group of checkboxes.
Within a group of checkboxes the name
attribute must be unique to the form, and the id
attribute must be unique to the page.
When disabling checkboxes do not solely rely on the is-disabled
class, ensure that the disabled
attribute is set on all the checkboxes within the row.
If the native form validation needs to be disabled set the novalidate
attribute on the form.
Important messages
To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert"
and/or aria-live="assertive"
.
Overlay variant
An additional variant is available for this component which allows it to overlay other content on the page (rather than pushing it down). This can be activated simply by adding an additional data tag - data-variant="m-multiselect--overlay"
- alongside the data-module. If the component is placed at the bottom of the page, adding this class will extend the page height to allow room for the overlaid element, which may force white space below the footer; therefore, please check the outcome before finalising this use.
Using autocomplete
Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.
Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name
attribute and the autocomplete
attribute on each input element.
Further details can be found in the developer notes on the form introduction page.
Changing locale settings
Default text for the checkbox multiselect ('Please select..', 'All selected' etc) can be changed for a particular locale.
var locale = {
en: {
multiselect: {
pleaseSelect: 'Please select...',
allSelected: 'All selected',
selected: ' selected',
selectAll: 'Select all'
}
}
};
For more information on this, see our page on how to change locale settings within JavaScript.
The locale settings can also be changed on an individual basis if required. This is achieved by including any of the following data attributes:
data-pleaseselect
data-allselected
data-selected
data-selectall
Extension component
This component forms part of the 'forms-extended-a' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a-unmq.css" rel="stylesheet" />
<![endif]-->
Notes for testers
- In this instance the label for the checkbox is the wording directly on the right of the checkbox. Clicking/pressing the explanatory text for the group of checkboxes will not transfer focus to any of the checkboxes like it would for a text input.
- The label should be displayed to the right of the checkbox and should activate the checkbox when selected (as should the checkbox itself).
- It should be really clear which label applies to which checkbox by using background shading to group the label and the checkbox together.
- Check for additional white space forced below the footer if the overlay variant is used, and confirm result with developers.
Code Examples
Standard checkbox multiselect
<fieldset class="m-form-row" role="group">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-checkbox-group" data-module="m-multiselect">
<li class="m-checkbox-group__item">
<label class="a-checkbox" for="...">
<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
<span class="a-checkbox__ui"></span>
</label>
</li>
...
</ul>
</div>
</fieldset>
Standard checkbox multiselect - overlay variant
<fieldset class="m-form-row" role="group">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-checkbox-group" data-module="m-multiselect" data-variant="m-multiselect--overlay">
<li class="m-checkbox-group__item">
<label class="a-checkbox" for="...">
<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
<span class="a-checkbox__ui"></span>
</label>
</li>
...
</ul>
</div>
</fieldset>
Valid checkbox multiselect
<fieldset class="m-form-row is-valid" role="group" aria-invalid="false">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<ul class="m-checkbox-group" data-module="m-multiselect">
<li class="m-checkbox-group__item">
<label class="a-checkbox" for="...">
<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
<span class="a-checkbox__ui"></span>
</label>
</li>
...
</ul>
</div>
</fieldset>
Errored checkbox multiselect
<fieldset class="m-form-row is-error" role="group" aria-invalid="true">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<p class="m-form-row__error-message">...</p>
<ul class="m-checkbox-group" data-module="m-multiselect">
<li class="m-checkbox-group__item">
<label class="a-checkbox" for="...">
<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
<span class="a-checkbox__ui"></span>
</label>
</li>
...
</ul>
</div>
</fieldset>
Disabled checkbox multiselect
<fieldset class="m-form-row is-disabled" role="group">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-checkbox-group" data-module="m-multiselect">
<li class="m-checkbox-group__item">
<label class="a-checkbox" for="...">
<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." disabled />
<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
<span class="a-checkbox__ui"></span>
</label>
</li>
...
</ul>
</div>
</fieldset>
Required checkbox multiselect
<fieldset class="m-form-row" role="group" aria-required="true">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-checkbox-group" data-module="m-multiselect">
...
</ul>
</div>
</fieldset>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.m-checkbox-group |
Base styling for a group of checkboxes | Yes | .m-form-row__content > ul |
|
.m-checkbox-group__item |
Base for individual checkboxes | Yes | .m-checkbox-group > li |
|
.a-checkbox |
Additional styles for checkboxes | Yes | span |
|
.a-checkbox__input |
Additional styles for checkboxes | Yes | .a-checkbox > input |
|
.a-checkbox__label |
Styles for the label | Yes | .a-checkbox__input + span |
|
.a-checkbox__label--inner |
Styles in order to keep the label centered when multiple lines are needed | Yes | .a-checkbox__label > span |
|
.a-checkbox__ui |
Animations for the checkbox | Yes | .a-checkbox__label + span |
Keyboard operations
- TAB
-
Tabbing to an checkbox input should make the input clearly visually different so that the focus point on the page is obvious to the user.
- CURSOR KEYS
-
With focus on the checkbox, pressing SPACE will select/de-select the checkbox.