Skip to main content
🏠FormToggle SwitchVersion: Next

Toggle Switch

Thales Design System global CSS styles library - Toggle Switch Notice

Size

You can change size attribute between small, medium and large. By default, the size is on medium

SmallMidLarge
<qtm-toggle-switch size="small">Small</qtm-toggle-switch>
<qtm-toggle-switch size="medium">Mid</qtm-toggle-switch>
<qtm-toggle-switch size="large">Large</qtm-toggle-switch>

Colors

The toggle switch are available in two colors neutral and primary. The default color of a checked toggle switch is the primary color.

Default color

Primary color

Neutral color

<qtm-toggle-switch checked>Default color</qtm-toggle-switch>
<qtm-toggle-switch checked color="primary">Primary color</qtm-toggle-switch>
<qtm-toggle-switch checked color="neutral">Neutral color</qtm-toggle-switch>

Disabled switch

Add disabled to the toggle switch to disable this element.

Label
<qtm-toggle-switch disabled>Label</qtm-toggle-switch>

Label on the right

You may want to set the toggle switch on the right. For that, you have to set labelPosition attribute to right. By default, the toggle switch has labelPosition="left"

defaultleftright
<qtm-toggle-switch>default</qtm-toggle-switch>
<qtm-toggle-switch label-position="left">left</qtm-toggle-switch>
<qtm-toggle-switch label-position="right">right</qtm-toggle-switch>

An icon in the switch

You have the possibility to display icon in the switch. For that, you have to add displayIcon attribute to your toggle switch

Label

Label

Label

<qtm-toggle-switch size="small" display-icon>Label</qtm-toggle-switch>
<qtm-toggle-switch display-icon>Label</qtm-toggle-switch>
<qtm-toggle-switch size="large" display-icon>Label</qtm-toggle-switch>

By default, icons are a cross and a thickle. You can change that by adding properties below:

  • icon-on with a name of the icon when the switch is toggle "on"
  • icon-off with a 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

<qtm-toggle-switch color="primary" display-icon icon-on="lock_open" icon-off="lock">Label</qtm-toggle-switch>
<qtm-toggle-switch color="neutral" display-icon icon-on="face" icon-off="group">Label<qtm-toggle-switch>

Checked

You can control a toggle switch by using checked attribute.

Primary

Neutral

<qtm-toggle-switch checked color="primary">Primary</qtm-toggle-switch>
<qtm-toggle-switch checked color="neutral">Neutral</qtm-toggle-switch>

API

Loading API documentation...