Basic implementation


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>



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.


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>

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>

Accessibility rule

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

Implement as a group


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 class="mc-toggle">
<input class="mc-toggle__input" id="toggle2" type="checkbox" />
<label class="mc-toggle__label" for="toggle2"> Label </label>
<div class="mc-toggle">
<input class="mc-toggle__input" id="toggle3" type="checkbox" />
<label class="mc-toggle__label" for="toggle3"> Label </label>


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>


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">
<span class="mc-field__requirement"> mandatory </span>

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

From breakpoint s (all sizes)mc-toggle--sdefault
From breakpoint mmc-toggle--s@from-mmc-toggle--m@from-m
From breakpoint lmc-toggle--s@from-lmc-toggle--m@from-l
From breakpoint xlmc-toggle--s@from-xlmc-toggle--m@from-xl
From breakpoint xxlmc-toggle--s@from-xxlmc-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(
'xs': (
'width': 2,
'height': 1,
'l': (
'width': 6,
'height': 3,
@import 'components/c.toggles';