Skip to main content
🏠FormToggle Switch

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

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

Colors​

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

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

Disabled switch​

Add disabled to the toggle switch to disable this element.

<ToggleSwitch disabled>Label</ToggleSwitch>

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"

<ToggleSwitch>default</ToggleSwitch>
<ToggleSwitch labelPosition="left">left</ToggleSwitch>
<ToggleSwitch labelPosition="right">right</ToggleSwitch>

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

<ToggleSwitch size="small" displayIcon>Label</ToggleSwitch>
<ToggleSwitch displayIcon>Label</ToggleSwitch>
<ToggleSwitch size="large" displayIcon>Label</ToggleSwitch>

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

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

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

Checked​

You can control a toggle switch by using checked attribute.

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

API​

Loading API documentation...