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 label-position attribute to right.

By default, the toggle switch has label-position="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>

Rendering icons

The toggle switch can be enhanced visually by including icons. To do this, simply add the display-icon attribute to the toggle switch component. This uses Quantum's default icon set:

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

Label

<qtm-toggle-switch display-icon>Label</qtm-toggle-switch>

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

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

Label

Label

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

info

Icons are only specified as strings representing their names from the Material Icons library, unlike other components where custom icons can be provided as more complex objects. 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.

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