Components

Toggle

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Specs
Design

Basic implementation

Import

Import the settings and the toggle scss files.

@import 'settings-tools/_all-settings';


@include import-font-families();


@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">
      Label
    </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">
      Small toggle
    </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">
      Medium toggle (default)
    </label>
  </div>
</div>

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">
      Default
    </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">
      Checked
    </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">
      Disabled
    </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">
      Disabled and checked
    </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">
      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>
    </label>
  </div>
</div>

Implement as a group

Import

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

@import 'settings-tools/_all-settings';


@include import-font-families();


@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">
          Label
        </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">
          Label
        </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">
          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>
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">
            Label
          </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">
            Label
          </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">
            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 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">
            Label
          </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">
            Label
          </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">
            Label
          </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">
      New XS size
    </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">
      Old S size
    </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">
      Old M (default) size
    </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">
      New L size
    </label>
  </div>
</div>