Components

Toggle

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready
Usage
Code
Specs
Design

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>
Viewport: px 
<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="toggle" type="checkbox" />
    <label class="mc-toggle__label" for="toggle">
      <span class="mc-toggle__content">Label</span>
    </label>
  </div>
</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
Viewport: px 
<div class="example">
  <div class="mc-toggle mc-toggle--s">
    <input class="mc-toggle__input" id="small" type="checkbox" />
    <label class="mc-toggle__label" for="small">
      <span class="mc-toggle__content">Small toggle</span>
    </label>
  </div>
</div>


<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="default" type="checkbox" />
    <label class="mc-toggle__label" for="default">
      <span class="mc-toggle__content">Medium toggle (default)</span>
    </label>
  </div>
</div>

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.

Viewport: px 
<div class="example">
  <div class="mc-toggle mc-toggle--hide-label">
    <input class="mc-toggle__input" id="toggle" type="checkbox" />
    <label class="mc-toggle__label" for="toggle">
      <span class="mc-toggle__content">Label</span>
    </label>
  </div>
</div>
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
Viewport: px 
<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="default" type="checkbox" />
    <label class="mc-toggle__label" for="default">
      <span class="mc-toggle__content">Default</span>
    </label>
  </div>
</div>


<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="checked" type="checkbox" checked />
    <label class="mc-toggle__label" for="checked">
      <span class="mc-toggle__content">Checked</span>
    </label>
  </div>
</div>


<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="disabled" type="checkbox" disabled />
    <label class="mc-toggle__label" for="disabled">
      <span class="mc-toggle__content">Disabled</span>
    </label>
  </div>
</div>


<div class="example">
  <div class="mc-toggle">
    <input
      checked
      disabled
      class="mc-toggle__input"
      id="disabledOn"
      type="checkbox"
    />
    <label class="mc-toggle__label" for="disabledOn">
      <span class="mc-toggle__content">Disabled and checked</span>
    </label>
  </div>
</div>

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

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

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>
Viewport: px 
<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 mc-field__item">
        <input class="mc-toggle__input" id="toggle-01" type="checkbox" />
        <label class="mc-toggle__label" for="toggle-01">
          <span class="mc-toggle__content">Label</span>
        </label>
      </div>
      <div class="mc-toggle mc-field__item">
        <input class="mc-toggle__input" id="toggle-02" type="checkbox" />
        <label class="mc-toggle__label" for="toggle-02">
          <span class="mc-toggle__content">Label</span>
        </label>
      </div>
      <div class="mc-toggle mc-field__item">
        <input class="mc-toggle__input" id="toggle-03" type="checkbox" />
        <label class="mc-toggle__label" for="toggle-03">
          <span class="mc-toggle__content">Label</span>
        </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>
Viewport: px 
<div class="example">
  <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-toggle mc-field__item">
          <input class="mc-toggle__input" id="toggle-01" type="checkbox" />
          <label class="mc-toggle__label" for="toggle-01">
            <span class="mc-toggle__content">Label</span>
          </label>
        </div>
        <div class="mc-toggle mc-field__item">
          <input class="mc-toggle__input" id="toggle-02" type="checkbox" />
          <label class="mc-toggle__label" for="toggle-02">
            <span class="mc-toggle__content">Label</span>
          </label>
        </div>
        <div class="mc-toggle mc-field__item">
          <input class="mc-toggle__input" id="toggle-03" type="checkbox" />
          <label class="mc-toggle__label" for="toggle-03">
            <span class="mc-toggle__content">Label</span>
          </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 toggle element

Viewport: px 
<div class="example">
  <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-toggle mc-field__item">
          <input
            class="mc-toggle__input"
            id="toggle-01"
            type="checkbox"
            required
          />
          <label class="mc-toggle__label" for="toggle-01">
            <span class="mc-toggle__content">Label</span>
          </label>
        </div>
        <div class="mc-toggle mc-field__item">
          <input
            class="mc-toggle__input"
            id="toggle-02"
            type="checkbox"
            required
          />
          <label class="mc-toggle__label" for="toggle-02">
            <span class="mc-toggle__content">Label</span>
          </label>
        </div>
        <div class="mc-toggle mc-field__item">
          <input class="mc-toggle__input" id="toggle-03" type="checkbox" />
          <label class="mc-toggle__label" for="toggle-03">
            <span class="mc-toggle__content">Label</span>
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Responsive behaviors

Responsive size classes

breakpointmc-toggle--smc-toggle--m
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(
  $toggle-sizes,
  (
    "xs": (
      "width": 2,
      "height": 1,
    ),
    "l": (
      "width": 6,
      "height": 3,
    ),
  )
);


@import "components/_c.toggles";
Viewport: px 
<div class="example">
  <div class="mc-toggle mc-toggle--xs">
    <input class="mc-toggle__input" id="toggleXSmall" type="checkbox" />
    <label class="mc-toggle__label" for="toggleXSmall"> 
      <span class="mc-toggle__content">New XS size</span>
    </label>
  </div>
</div>
<div class="example">
  <div class="mc-toggle mc-toggle--s">
    <input class="mc-toggle__input" id="toggleSmall" type="checkbox" />
    <label class="mc-toggle__label" for="toggleSmall">
      <span class="mc-toggle__content">Old S size</span>
    </label>
  </div>
</div>
<div class="example">
  <div class="mc-toggle">
    <input class="mc-toggle__input" id="toggleDefault" type="checkbox" />
    <label class="mc-toggle__label" for="toggleDefault">
      <span class="mc-toggle__content">Old M (default) size</span>
    </label>
  </div>
</div>
<div class="example">
  <div class="mc-toggle mc-toggle--l">
    <input class="mc-toggle__input" id="toggleLarge" type="checkbox" />
    <label class="mc-toggle__label" for="toggleLarge">
      <span class="mc-toggle__content">New L size</span>
    </label>
  </div>
</div>