- Taxonomic name: O-CARD-SELECT
- Extension: FORMS-EXTENDED-A
- Added on: v4.5.0 (07/12/18)
- Updated on: v2023.01 (07/06/23)
Checkbox multicard select, complex variant
Checkbox cards allow multiple card selections to be made through use of checkboxes. This variant can contain almost anything from our component library - text, images, icons, form components, bullets, buttons, links and more.
Design and usage
Checkbox positioning can be either top left or bottom left, and selections usually have a definable limit beyond which no more cards can be selected; this is done through the use of an optional data module which restricts the maximum number of checkboxes which it is possible to select, displays a count and adds an overlay with a warning message when this limit is reached.
Structure
- If the card contains form fields, the checkbox should generally be positioned top left aligned where possible.
- Complex cards can contain a combination of up to 8 data points (including data group or data replay) and / or an image, icon, label, form fields, inputs, etc.
Labels
- We advise keeping labels short, ideally no more than three lines maximum on a mobile device.
Notifications and errors
- Notifications: Standard notification placement appears above card stack, along with additional styling including selection limits and indicator (required when selection criteria applicable). See the basic variant documentation for details on how to use standard notifications.
- Error states: Addition of contextual message appearing on card selection in instance of maximum card selection being reached; provides user with contextual information and actions required.
- Remaining cards are de-activated completely.
Accessibility and screen readers
- Checkbox is mandatory.
- Hit areas defined depending on checkbox orientation (general rule where applicable to include icon, label and checkbox as standard).
- Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element
- Aria-invalid must be used to indicate when an error has occurred with this element
- Aria-describedby must be used to link any help, instructional and/or error text with the element/form fields
Non-JS requirements and considerations
- Error states revert to standardised FW versions with notification appearing above stack of cards.
- Contextual card message not included.
Placement
- Stacking: Cards can fit a multitude of widths across the 12 column span; depending on the layout requirements, flexibility is baked in.
- Positioning: Cards can be laid out either horizontally, vertically and in carousels (desktop, tablet, mobile).
- Carousels: Afforded on mobile for options amounting to greater than eight cards.
- Adaptable card heights based on content and elements included. In instances of horizontal arrangement, stacking will inherent tallest card height for a particular row.
- Horizontally stacking (desktop): Avoid Show more or Show/hide for body content to avoid increasing of row heights when expanded.
Desktop
- Cards can span 4, 6, 8 or 12 grid column widths.
- Horizontal (stacked) and vertical (side-by-side, carousel) card layouts and positioning included.
Tablet
- Cards can span 4, 6 or 8 grid column widths.
- Horizontal (stacked) and vertical (side-by-side,carousel) card layouts and positioning included.
Mobile
- Cards can span 4 column widths.
- Horizontal (stacked) and vertical (side-by-side carousel only) card layouts and positioning included.
Use case and exception scenarios
- Checkbox placement to be positioned top left if form fields are included as per design guidance. Specific exceptions exist for this variant - please see below for details.
Examples
With icon in label and keyline - three cols desktop / two cols tablet
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain l-columns l-columns--2-medium l-columns--3-large">
<li class="l-columns__column m-card m-card-select m-card-select--icon m-card-select--keyline a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<label class="m-card-select__label-wrapper" for="...">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
<div class="m-card-content m-card-select__content">
...
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
With icon in label and keyline, bottom labels - three cols desktop / two cols tablet
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"... - ...</span>
<ul class="a-list-plain l-columns l-columns--2-medium l-columns--3-large">
<li class="l-columns__column m-card m-card-select m-card-select--icon m-card-select--keyline a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." aria-labelledby="..." />
<label id="..." class="m-card-select__label-wrapper m-card-select__label-wrapper--top" for="...">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
<div class="m-card-content m-card-select__content">
...
</div>
<label class="m-card-select__label-wrapper m-card-select__label-wrapper--bottom" for="..." aria-hidden="true">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-checkbox__label-inner--selected">Selected</span>
<span class="a-checkbox__label-inner a-checkbox__label-inner--unselected">Unselected</span>
</span>
</label>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
With icon in label and keyline - three cols desktop / two cols tablet - carousel
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="..." >
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<div class="l-columns l-columns--2-medium l-columns--3-large o-carousel o-carousel--all" data-module="o-carousel">
<div class="l-columns__column m-card m-card-select m-card-select--icon m-card-select--keyline a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<label class="m-card-select__label-wrapper" for="...">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
<div class="m-card-content m-card-select__content">
...
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</div> ... </div>
</div>
</fieldset>
Indent variant - 8 cols
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max=".." data-selected="..." >
<legend class="a-label">...</legend>
<div class="m-form-row__content l-max l-max--left l-max--8-column-large">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<div class="m-card m-card-select m-card-select--indent a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<label class="m-card-select__label-wrapper" for="...">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
<span class="a-checkbox__label-inner">...</span>
</span>
</label>
<div class="m-card-content m-card-select__content">
...
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</div> ... </div>
</fieldset>
Enhanced centred text with link and secondary CTA, bottom labels
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class=" m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain l-columns l-columns--2-medium l-columns--3-large">
<li class="l-columns__column m-card m-card-select a-checkbox t-accent-light t-accent-light--1 u-text--center">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." aria-labelledby="..." />
<label id="..." class="m-card-select__label-wrapper m-card-select__label-wrapper--top" for="...">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<div class="m-card-content m-card-select__content">
...
</div>
<label class="m-card-select__label-wrapper m-card-select__label-wrapper--bottom" for="..." aria-hidden="true">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-checkbox__label-inner--selected">Selected</span>
<span class="a-checkbox__label-inner a-checkbox__label-inner--unselected">Unselected</span>
</span>
</label>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
Indent with icon in label plus columns
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="..." >
<legend class="a-label">...</legend>
<div class="m-form-row__content l-max l-max--left l-max--8-column-large">
<div class="o-card-select__selected-message"><p class="u-margin--top-none">...</span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain">
<li class="m-card m-card-select m-card-select--indent m-card-select--icon a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." aria-labelledby="..." />
<label class="m-card-select__label-wrapper" for="..." aria-hidden="true">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
</span>
</label>
<div class="m-card-content m-card-select__content">
<label id="..." class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold" for="...">...</label>
<div class="l-columns l-columns--2-medium l-columns--2-large">
<div class="l-columns__column">
...
</div>
<div class="l-columns__column">
...
</div>
</div>
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
Three column layout with icon in label etc
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain">
<li class="m-card m-card-select m-card-select--icon a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<div class="l-columns l-columns--2-medium l-columns--3-large">
<label class="m-card-select__label-wrapper l-columns__column" for="...">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<div class="l-columns__column">
<div class="m-card-content m-card-select__content">
...
</div>
</div>
<div class="l-columns__column">
<div class="m-card-content m-card-select__content">
...
</div>
</div>
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
Complex three column layout with optional icon in label etc
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain">
<li class="m-card m-card-select m-card-select--icon a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<div class="l-columns l-columns--33-66-large">
<label class="m-card-select__label-wrapper l-columns__column" for="...">
<span class="a-checkbox__label m-card-select__label">
<img src="..." decoding="async" width="..." height="..." alt="" />
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<div class="l-columns__column">
<div class="l-columns l-columns--2-medium l-columns--75-25-large">
<div class="l-columns__column">
<div class="m-card-content m-card-select__content">
<div class="m-card-content__inner">
...
</div>
</div>
</div>
<div class="l-columns__column">
<div class="m-card-content m-card-select__content">
<div class="m-card-content__inner">
...
</div>
</div>
</div>
</div>
</div>
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li>
...
</ul>
</div>
</fieldset>
With indent and keyline - two col data replay
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content l-max l-max--left l-max--8-column-large">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain">
<li class="m-card m-card-select m-card-select--indent m-card-select--keyline a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." />
<label class="m-card-select__label-wrapper" for="...">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
<span class="a-checkbox__label-inner">...</span>
</span>
</label>
<hr class="a-divider-line a-divider-line--horizontal-solid" />
<div class="m-card-content m-card-select__content">
<div class="m-card-content__inner l-columns l-columns--2-medium l-columns--2-large">
<div class="l-columns__column">
<div class="m-data-replay m-data-replay--stacked m-data-replay--no-keyline">
<dl>
...
</dl>
</div>
</div>
<div class="l-columns__column">
<div class="m-data-replay m-data-replay--stacked m-data-replay--no-keyline">
<dl>
...
</dl>
</div>
</div>
</div>
</div>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
Example francaise - pleine largeur - lables au dessous
Interactive example
Code example
<fieldset class="m-form-row m-form-row--full-width o-card-select" data-module="o-card-select" data-max="..." data-selected="...">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<div class="o-card-select__selected-message"><p class="u-margin--top-none"><span></span></p></div>
<span class="o-card-select__max-message"></span>
<ul class="a-list-plain">
<li class="m-card m-card-select a-checkbox t-accent-light t-accent-light--1">
<input class="a-checkbox__input m-card-select__input" id="..." name="..." type="checkbox" value="..." aria-labelledby="..." />
<label id="..." class="m-card-select__label-wrapper m-card-select__label-wrapper--top" for="...">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-heading a-heading--3 a-heading--semibold">...</span>
</span>
</label>
<div class="m-card-content m-card-select__content">
<div class="m-data-replay m-data-replay--eighty-twenty m-data-replay--reversed-bold m-data-replay--no-keyline">
<dl>
...
</dl>
</div>
</div>
<label class="m-card-select__label-wrapper m-card-select__label-wrapper--bottom" for="..." aria-hidden="true">
<span class="a-checkbox__label m-card-select__label">
<span class="a-checkbox__label-inner a-checkbox__label-inner--selected">Unselected</span>
<span class="a-checkbox__label-inner a-checkbox__label-inner--unselected">Selected</span>
</span>
</label>
<span class="a-checkbox__ui m-card-select__ui"></span>
</li> ... </ul>
</div>
</fieldset>
Development and test
Notes for developers
When creating a set of multicard select checkboxes, they must be contained within
a single fieldset where the legend is the question/title for the whole group.
Within a group of checkboxes the name
attribute
must be unique to the form, and the id
attribute
must be unique to the page. Furthermore, sets of cards should be contained as
list items within a ul
element in order to retain
a link between them and to assist users taking advantage of screenreaders.
When disabling form elements, do not solely rely on the is-disabled
class, but ensure that the disabled
attribute is
also set on the relevant form element or input. If an entire set of form
elements is to be disabled, the is-disabled
class
and disabled
attribute should be added directly to
the fieldset instead, and not to each individual element within it. However if
only one element from the set is disabled, then the class and attribute should
be applied to that element only.
The is-invalid
class can also be added alongside
is-disabled
to fade the opacity of the card and
display a message on an overlay; this message is set within the m-card-disabled
span following the a-checkbox__ui
span.
If the native form validation needs to be disabled, set the novalidate
attribute on the form.
Aria usage for errors and help text
To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.
All form row help, explanatory text, form row instructions and form row errors
must have a unique id assigned to them and be appropriately linked to either the
individual form input or the form row using aria-describedby
.
This ensures that the help text is read out immediately on focus of the form
input/fieldset. When there is more that one item that requires referencing
within the aria-describedby
attribute the id
values must be supplied in the form of a space separated list. For example if
there is an error with id of 'err1' and help text with id of
'help1' the value for the aria-describedby
attribute would be 'err1 help1'.
All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.
All erroring form fields (or fieldset if a group or radios/checkboxes) must have
aria-invalid="true"
set on them, ensuring that
when a user focus' on an errored form field, the field will be announced as
invalid, so the user is then aware that there in an issue that requires fixing.
When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.
- Single form field - All attributes should be applied directly to that form field
- Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
- Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)
There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.
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"
.
Accent colours
Do not use within areas with t-card-accent
classes
applied as this could cause the font colours to display incorrectly.
Data module
Adding the data-module="o-card-select"
allows the
maximum number of checkboxes which it is possible to select to be restricted,
displaying a count and adding an overlay with a warning message when this limit
is reached.
The message displayed above the card row can be customised to suit requirements.
The child span
within the .o-card-select__selected-message
> p
tag is populated by JavaScript to display the appropriate
numer of cards selected, followed by '/' followed by the maximum number of cards
permitted (set in the data-max
attribute),
followed by the value set in the data-selected
attribute, for example '2 / 2 selected'. If JavaScript is not present, only the
basic message will be displayed.
The message which appears on the overlay when the maximum number of cards has been selected is set via the locale settings:
en: {
oCardSelect : {
maxMessage : 'Maximum reached - Please deselect an option to proceed',
},
},
For more information on this, see our page on how to change locale settings within JavaScript.
The overlay and message can be disabled while retaining the selected card count
if required - add the data-overlay="off"
attribute
to achieve this.
Bottom labels
The checkbox for any of these cards can be placed either at the top or at the
bottom. Please see one of the appropriate examples below for details, but ensure
that for bottom checkboxes, the top label has the additional m-card-select__label-wrapper--top
class added
alongside the m-card-select__label-wrapper
tag,
and that the appropriate m-card-select__label-wrapper--bottom
code block is added immediately above the ui element.
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.
Controling the checkbox multicard select component programatically
Checkbox multicard select can be controlled programatically to deselect all or to select/deselect a set of multicard select cards. The following methods are available for use:
Method | Description |
---|---|
select( [ '#inputId1',
'#inputId2' ] ) |
Select one or more checkboxes using an array of ids. |
deselect( [ '#inputId1',
'#inputId2' ] ) |
Deselect one or more checkboxes using an array of ids. |
deselectAll() |
Deselect all checkboxes. |
For example:
document.addEventListener( 'frameworkready', function () {
FRAMEWORK.require([ 'blocks/o-card-select' ], function ( oCardSelectModule ) {
var oCardSelectEl = document.querySelector( '#multicardGroupId' ),
oCardSelectInstance = oCardSelectModule.initInstance( oCardSelectEl ); oCardSelectInstance.select( [ '#inputId1', '#inputId2' ] );
});
});
Other information
Checkbox multicard select rows must not be nested inside other cards with a dark accent colour background, as the results could be unpredicatble.
Extension component
This component forms part of the 'forms-extended-a' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/forms-extended-a.css" rel="stylesheet" />
Notes for testers
- Ensure that all checkboxes have a related label. It should be really clear which label applies to which checkbox by using background shading to group the label and the checkbox together.
- Ensure carousel controls and movement remain fluent regardless of browser type and / or orientation. Check further carousel functionality against standard expectations laid out on the card carousel documentation page.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.o-card-select |
Base styling for a group of multicard select checkboxes | Yes | fieldset |
|
.o-card-select__selected-message |
Class for message to display when there is a maximum allowed number of selectable checkboxes | .o-card-select > .m-form-row__content >
div |
||
.o-card-select__max-message
|
Class for message to display when maximum allowed number of checkboxes has been selected | .o-card-select > .m-form-row__content >
div |
Should be added to an .o-card-select > span rather than div for basic variant | |
.m-card-select |
Class to add to card to add required styles | Yes | .m-card |
|
.m-card-select__input |
Additional class specific to checkbox input in o-card-select context | Yes | .a-checkbox__input |
|
.m-card-select__label-wrapper--top |
Class to add to top label if checkbox is being added below content | .m-card-select__label-wrapper (top
instance) |
||
.m-card-select__label-wrapper--bottom |
Class to add to bottom label if checkbox is being added below content | .m-card-select__label-wrapper (bottom
instance) |
||
.m-card-select__label |
Additional class specific to checkbox label in o-card-select context | Yes | .a-checkbox__label |
|
.m-card-select__label--floating |
Class to float checkbox to top left for cards with no supporting text label (eg icon cards) | .a-checkbox__label |
||
.m-card-select__ui |
Additional class specific to checkbox ui in o-card-select context | Yes | .a-checkbox__ui |
|
.is-unavailable |
Class to add to disabled card to add unavailable overly and message | .m-card.is-disabled |
||
.m-card-unavailable |
Class for unavailable card overlay and message | .m-card-select > div |
||
.m-card-select--icon |
Variant to add icon in checbox label | .m-card-select |
||
.m-card-select--keyline |
Variant to alter padding if keyline is added below checkbox label | .m-card-select |
||
.m-card-select--indent |
Variant to indent card content so it lines up with text portion of checkbox label | .m-card-select |
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/deselect the checkbox.