Checkbox
Basic implementation
Import
Import the settings and the checkbox scss
files.
@import 'settings-tools/all-settings';@import 'components/c.checkbox';
Basic usage
To use the checkbox pattern you have 3 main css classes to apply:
mc-checkbox
on a div containermc-checkbox__input
on the input tagmc-checkbox__label
on the label tag
<div class="mc-checkbox"> <input id="checkbox-01" type="checkbox" class="mc-checkbox__input" name="example" /> <label for="checkbox-01" class="mc-checkbox__label"> Label </label></div>
Checkbox states
:checked
:disabled
:indeterminate
.is-invalid
Note that you can't make an indeterminate checkbox through HTML. There is no indeterminate HTML attribute. You can change this property with Javascript only.
Implement as a group
Import
Import the settings, the checkbox and the fields scss files.
@import 'settings-tools/all-settings';@import 'components/c.checkbox';@import 'components/c.fields';
Note that the import order is important to get the right rendering of the component.
Group usage
To use the checkbox pattern in a group of elements in your form, you must use the following:
mc-field
and the modifiermc-field--group
on container (preferably use a fieldset tag)mc-field__legend
on the legend tagmc-field__container
on the wrapper of the set of checkbox elements- and
mc-field__item
in addition of themc-checkbox
class on the input tag:
<div class="example"> <fieldset class="mc-field mc-field--group"> <legend class="mc-field__legend">Legend</legend> <div class="mc-field__container"> <div class="mc-field__item mc-checkbox"> <input id="checkbox-01" type="checkbox" class="mc-checkbox__input" name="example1" /> <label for="checkbox-01" class="mc-checkbox__label"> Checkbox Label </label> </div> <div class="mc-field__item mc-checkbox"> <input id="checkbox-02" type="checkbox" class="mc-checkbox__input" name="example2" /> <label for="checkbox-02" class="mc-checkbox__label"> Checkbox Label </label> </div> <div class="mc-field__item mc-checkbox"> <input id="checkbox-03" type="checkbox" class="mc-checkbox__input" name="example3" /> <label for="checkbox-03" class="mc-checkbox__label"> Checkbox Label </label> </div> <div class="mc-field__item mc-checkbox"> <input id="checkbox-04" type="checkbox" class="mc-checkbox__input" name="example4" /> <label for="checkbox-04" class="mc-checkbox__label"> Checkbox Label </label> </div> </div> </fieldset></div>
Variations
Horizontal layer group
By default the checkboxes elements are positioned vertically in the group.
If you wish, you can arrange the elements horizontally. To do so:
- You add the modifier class
mc-field__container--inline
on themc-field__container
elements
Note that the elements become horizontally aligned from the
m-medium
breakpoint (768px). Below this resolution, the elements are arranged vertically.
Behaviors
Help text
You have the possibility to define a help text when using checkboxes in a group.
For this you have to add a span with the mc-field__help
class below the legend.
<legend class="mc-field__legend">Label</legend><span id="helptext" class="mc-field__help"> Help text </span>
Requirement
When one or more elements of the group are mandatory, you must specify this to the user.
For this you have to add a span with the class mc-field__requirement
right after the legend text.
<legend class="mc-field__legend"> Legend <span class="mc-field__requirement"> mandatory </span></legend>
When one or more elements of the group are mandatory the required
attribute must be added on the concerned checkbox element
Validation
Invalid
To indicate that one or more elements of the group are not valid, several steps are to be implemented:
- Add the
is-invalid
class and thearia-invalid
attribute to the concerned checkbox element - You can add in addition a text detailing the error. This text must be added in a span with the class
mc-field__error-message
and positioned below the wrapper
If you use an error message you must comply with the following accessibility rules:
- the span
mc-field__error-message
must always have anid
- the
aria-describedby
attribute must be added on each concerned checkboxes elements and must refer to the id of the error message