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>Label</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 :

Small

Mid

Large

<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-disabled">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" disabled />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Label on the right

You may want to set the toggle switch 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. You can force it to be on the left by adding .qtm-label-left.

Default

Left

Right

<label class="qtm-toggle-switch">
  <span>Default</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>
<label class="qtm-toggle-switch qtm-label-left">
  <span>Left</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>Right</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span class="qtm-toggle-slider"></span>
  </div>
</label>

Rendering icons

The toggle switch can be enhanced visually by including icons. To do this, simply add the .qtm-icon-displayed class to the <label> with the .qtm-toggle-switch class.

• The "on" state is represented by a tick icon.
• The "off" state is represented by a cross icon.

Label

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

These icons can be customized by specifying the data-icon-on and data-icon-off data attributes with the desired icon names from the Material Icons library:

• Use data-icon-on to set an icon name for the "on" state.
• Use data-icon-off to set an icon name for the "off" state.

Label

Label

<label class="qtm-toggle-switch qtm-icon-displayed qtm-primary">
  <span>Label</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-icon-displayed qtm-neutral">
  <span>Label</span>
  <div class="qtm-switch">
    <input type="checkbox" />
    <span
      class="qtm-toggle-slider"
      data-icon-on="face"
      data-icon-off="group">
    </span>
  </div>
</label>

info

Icons are specified as strings representing their names from the Material Icons library, unlike other components where icons are typically provided as <i> HTML element with a set of classes. This approach stems from the application of CSS to the inner <input type="checkbox">, utilizing :before and :after pseudo-elements. This technical choice simplifies icon customization by offering a streamlined interface, though it limits icon selection to the Material Icons library.

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 />
    <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>