Toggle Switch

Thales Design System global CSS styles library - Toggle Switch Notice

How to use

Let use the switch now. Shown below is a sample switch:

Label

<label class="qtm-toggle-switch">
  <span>Text</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Change size

You can change size between "small", "medium" and "large". Simply apply the class wanted next to "toggleSwitch". By default, the size is on "medium"

Control the size of a switch using .qtm-small, .qtm-medium or .qtm-large classes. By default, the switch has size medium.

For example :

SmallMidLarge

<label class="qtm-toggle-switch qtm-small">
  <span>Small</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-medium">
  <span>Mid</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-large">
  <span>Large</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Neutral color

You may want to have neutral color. For that, you have to add .qtm-neutral class to the div next to .qtm-toggle-switch class.

For example :

Label

<label class="qtm-toggle-switch qtm-neutral">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Disabled switch

You may want to disable the switch. For that, you have to add .qtm-disabled class to label and disabled attribute to the input.

For example :

Label

<label class="qtm-toggle-switch qtm-neutral qtm-disabled">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" disabled="true" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Label on the right

You may want to set the label on the right. For that, you have to add .qtm-label-right class to the div next to the .qtm-toggle-switch class. By default, the label is on the left

For example :

LabelLabel

<label class="qtm-toggle-switch qtm-label-left">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-label-right">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

An icon in the switch

You have the possibility to display icon in the switch. For that, you have to add .qtm-icon-displayed class to the div next to the .qtm-toggle-switch class.

For example :

Label

Label

Label

<label class="qtm-toggle-switch qtm-icon-displayed">
  <span>Text</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

By default, icons are a cross and a thickle. You can change that by adding properties on the main div.

• data-icon-on, is the name of the icon when the switch is toggle "on"
• data-icon-off, is the name of the icon when the switch is toggle "off"

We are using the icon of material design for now. To know the name of the icon, please go to the material icon website here

Label

Label

Label

<label class="qtm-toggle-switch qtm-small qtm-icon-displayed">
  <span>Text</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span
      class="qtm-toggle-slider"
      data-icon-on="lock_open"
      data-icon-off="lock"
    >
    </span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-medium qtm-icon-displayed">
  <span>Text</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider" data-icon-on="face" data-icon-off="group">
    </span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-large qtm-icon-displayed">
  <span>Text</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span
      class="qtm-toggle-slider"
      data-icon-on="zoom_in"
      data-icon-off="zoom_out"
    >
    </span>
  </div>
</label>

Sample mixed up

If you want a large switch with neutral color and a person when it's on and nothing when it's off. But also a small neutral switch and a medium disabled on with a "person" icon and a "face" icon, you can simply write that down :

Label

Label

Label

<label class="qtm-toggle-switch qtm-small qtm-neutral">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"> </span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-medium qtm-icon-displayed qtm-disabled">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" disabled="true" />
    <span class="qtm-toggle-slider" data-icon-on="person" data-icon-off="group">
    </span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-large qtm-neutral qtm-icon-displayed">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider" data-icon-on="check" data-icon-off="">
    </span>
  </div>
</label>