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

<QtmToggleSwitch size="small">Small</QtmToggleSwitch>
<QtmToggleSwitch size="medium">Mid</QtmToggleSwitch>
<QtmToggleSwitch size="large">Large</QtmToggleSwitch>

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

<QtmToggleSwitch checked>Default color</QtmToggleSwitch>
<QtmToggleSwitch checked color="primary">Primary color</QtmToggleSwitch>
<QtmToggleSwitch checked color="neutral">Neutral color</QtmToggleSwitch>

Disabled switch

Add disabled to the toggle switch to disable this element.

Label

<QtmToggleSwitch disabled>Label</QtmToggleSwitch>

Rendering icons

The toggle switch can be enhanced visually by including icons. To do this, simply add the displayIcon 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

<QtmToggleSwitch displayIcon>Label</QtmToggleSwitch>

These icons can be customized by specifying the iconOn and iconOff properties with the desired icon names from the Material Icons library:

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

Label

Label

<QtmToggleSwitch displayIcon iconOn="lock_open" iconOff="lock" color="primary">
  Label
</QtmToggleSwitch>
<QtmToggleSwitch displayIcon iconOn="face" iconOff="group" color="neutral">
  Label
</QtmToggleSwitch>

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.

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

<QtmToggleSwitch>Default</QtmToggleSwitch>
<QtmToggleSwitch labelPosition="left">Left</QtmToggleSwitch>
<QtmToggleSwitch labelPosition="right">Right</QtmToggleSwitch>

Checked

You can control a toggle switch by using checked attribute.

Primary

Neutral

<QtmToggleSwitch checked color="primary">Primary</QtmToggleSwitch>
<QtmToggleSwitch checked color="neutral">Neutral</QtmToggleSwitch>

API

Loading API documentation...