Toggle

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Basic implementation

Import

Import the settings and the toggle scss files.


@import 'settings-tools/all-settings';
@import 'components/c.toggle';

Basic usage

To create a basic toggle, wrap a input[type="checkbox"] and a label inside a div and apply the following classes:

mc-toggle on a div container
mc-toggle__input on the input tag
mc-toggle__label on the label tag


<div class="mc-toggle">
  <input class="mc-toggle__input" id="example" type="checkbox" />
  <label class="mc-toggle__label" for="example"> Label </label>
</div>

Variations

Sizes

You can use one of the 2 available sizes:

Small : apply the modifier mc-toggle--s in addition of the mc-toggle class

Medium : this is the default style so you don't need to add a modifier class

Hide label

In some cases, you may need to visually hide the label text associated with the toggle element.

To achieve this, you can use the modifier mc-toggle--hide-label.

Accessibility rule

Note that the mc-toggle--hide-label modifier hides the label text only visually.

However, for accessibility reasons, you should always make sure to insert a label text in your toggle code.

States

Depending on the context of use, the toggle can have several states:

On
Off
Checked
On disabled
Off disabled

Displaying on/off states in labels

In order to add on/off states to the labels, add the following code:


<span class="mc-toggle__state" aria-hidden="true">
  <span class="mc-toggle__off">Off</span>
  <span class="mc-toggle__on">On</span>
</span>

Inside the label after you text:


<div class="mc-toggle">
  <input class="mc-toggle__input" id="example" type="checkbox" />
  <label class="mc-toggle__label" for="example" aria-label="example toggle 4">
    My option :
    <span class="mc-toggle__state" aria-hidden="true">
      <span class="mc-toggle__off">Off</span>
      <span class="mc-toggle__on">On</span>
    </span>
  </label>
</div>

Accessibility rule

Don't forget to add the attribute aria-hidden="true" on the mc-toggle__state element

Implement as a group

Import

Import the settings, the toggle and the fields scss files.


@import 'settings-tools/all-settings';
@import 'components/c.toggle';
@import 'components/c.fields';

Note that the import order is important to get the right rendering of the component.

Group usage

To use the toggle 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 toggle elements
and mc-field__item in addition of the mc-toggle class on the toggle wrapper:


<div class="example">
  <fieldset class="mc-field mc-field--group">
    <legend class="mc-field__legend">Group Label</legend>
    <div class="mc-field__container">
      <div class="mc-toggle">
        <input class="mc-toggle__input" id="toggle1" type="checkbox" />
        <label class="mc-toggle__label" for="toggle1"> Label </label>
      </div>
      <div class="mc-toggle">
        <input class="mc-toggle__input" id="toggle2" type="checkbox" />
        <label class="mc-toggle__label" for="toggle2"> Label </label>
      </div>
      <div class="mc-toggle">
        <input class="mc-toggle__input" id="toggle3" type="checkbox" />
        <label class="mc-toggle__label" for="toggle3"> Label </label>
      </div>
    </div>
  </fieldset>
</div>

Behaviors

Help text

You have the possibility to define a help text when using toggles 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>

Semantic rule

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

Responsive behaviors

Responsive size classes

breakpoint	`mc-toggle--s`	`mc-toggle--m`
From breakpoint s (all sizes)	`mc-toggle--s`	default
From breakpoint m	`mc-toggle--s@from-m`	`mc-toggle--m@from-m`
From breakpoint l	`mc-toggle--s@from-l`	`mc-toggle--m@from-l`
From breakpoint xl	`mc-toggle--s@from-xl`	`mc-toggle--m@from-xl`
From breakpoint xxl	`mc-toggle--s@from-xxl`	`mc-toggle--m@from-xxl`

Extension and customization

Adding a toggle size

If you want to add a toggle size, update the $toggle-sizes map after the all-settings import, then import your toggles example :


@import 'settings/all-settings';
$toggle-sizes: map-merge(
  $toggle-sizes,
  (
    'xs': (
      'width': 2,
      'height': 1,
    ),
    'l': (
      'width': 6,
      'height': 3,
    ),
  )
);
@import 'components/c.toggles';