Mozaic

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 container
mc-checkbox__input on the input tag
mc-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

About the indeterminate state

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 modifier mc-field--group on container (preferably use a fieldset tag)
mc-field__legend on the legend tag
mc-field__container on the wrapper of the set of checkbox elements
and mc-field__item in addition of the mc-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 the mc-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>

Viewport: px

<div class="example">
  <div class="example__title">Default</div>

  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">Legend</legend>
      <span id="helptext" class="mc-field__help"> Help text </span>

      <div class="mc-field__container">
        <div class="mc-field__item mc-checkbox">
          <input
            id="checkbox-01"
            type="checkbox"
            class="mc-checkbox__input"
            name="example"
          />
          <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="example"
          />
          <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="example"
          />
          <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="example"
          />
          <label for="checkbox-04" class="mc-checkbox__label">
            Checkbox Label
          </label>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="example__title">Horizontal</div>

  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">Legend</legend>
      <span id="helptext" class="mc-field__help"> Help text </span>

      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-05"
            type="checkbox"
            class="mc-checkbox__input"
            name="example"
          />
          <label for="checkbox-05" class="mc-checkbox__label">
            Checkbox Label
          </label>
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-06"
            type="checkbox"
            class="mc-checkbox__input"
            name="example"
          />
          <label for="checkbox-06" class="mc-checkbox__label">
            Checkbox Label
          </label>
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-07"
            type="checkbox"
            class="mc-checkbox__input"
            name="example"
          />
          <label for="checkbox-07" class="mc-checkbox__label">
            Checkbox Label
          </label>
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-08"
            type="checkbox"
            class="mc-checkbox__input"
            name="example"
          />
          <label for="checkbox-08" class="mc-checkbox__label">
            Checkbox Label
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</div>

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>

Semantic rule

When one or more elements of the group are mandatory the required attribute must be added on the concerned checkbox element

Viewport: px

<div class="example">
  <div class="example__title">Default</div>

  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
        <span class="mc-field__requirement"> mandatory </span>
      </legend>

      <div class="mc-field__container">
        <div class="mc-field__item mc-checkbox">
          <input
            required
            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
            required
            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>

  <div class="example__title">Horizontal</div>

  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
        <span class="mc-field__requirement"> mandatory </span>
      </legend>

      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-checkbox mc-field__item">
          <input
            required
            id="checkbox-05"
            type="checkbox"
            class="mc-checkbox__input"
            name="example1"
          />
          <label for="checkbox-05" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-06"
            type="checkbox"
            class="mc-checkbox__input"
            name="example2"
          />
          <label for="checkbox-06" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            required
            id="checkbox-07"
            type="checkbox"
            class="mc-checkbox__input"
            name="example3"
          />
          <label for="checkbox-07" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-08"
            type="checkbox"
            class="mc-checkbox__input"
            name="example4"
          />
          <label for="checkbox-08" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
      </div>
    </fieldset>
  </div>
</div>

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 the aria-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

Accessibility rules

If you use an error message you must comply with the following accessibility rules:

the span mc-field__error-message must always have an id
the aria-describedby attribute must be added on each concerned checkboxes elements and must refer to the id of the error message

Viewport: px

<div class="example">
  <div class="example__title">Default</div>

  <div class="example__container">
    <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"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            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"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            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"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            name="example4"
          />
          <label for="checkbox-04" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
      </div>

      <span id="err_1" class="mc-field__error-message">
        Error: A mistake has been made. Please try again.
      </span>
    </fieldset>
  </div>

  <div class="example__title">Horizontal</div>

  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">Legend</legend>

      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-05"
            type="checkbox"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            name="example1"
          />
          <label for="checkbox-05" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-06"
            type="checkbox"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            name="example2"
          />
          <label for="checkbox-06" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-07"
            type="checkbox"
            class="mc-checkbox__input"
            name="example3"
          />
          <label for="checkbox-07" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
        <div class="mc-checkbox mc-field__item">
          <input
            id="checkbox-08"
            type="checkbox"
            aria-describedby="err_1"
            class="mc-checkbox__input is-invalid"
            name="example4"
          />
          <label for="checkbox-08" class="mc-checkbox__label"
            >Checkbox Label</label
          >
        </div>
      </div>

      <span id="err_1" class="mc-field__error-message">
        Error: A mistake has been made. Please try again.
      </span>
    </fieldset>
  </div>
</div>