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

Small

Mid

Large

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

Default color

Primary color

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

Label

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

default

left

right

<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

Label

Label

Label

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

By default, icons are a cross and a checkmark. 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

Label

Label

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

Primary

Neutral

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

Event Handling

The ToggleSwitch component provides an onChange event handler that is triggered when the toggle state changes.

onChange

const handleChange = (event) => {
  // event.target.checked contains the current toggle state (true when on, false when off)
  console.log('Toggle state:', event.target.checked);
  
  // You can update state or perform other actions based on the toggle state
  setEnabled(event.target.checked);
  
  if (event.target.checked) {
    enableFeature();
  } else {
    disableFeature();
  }
};

<ToggleSwitch onChange={handleChange}>
  Toggle me
</ToggleSwitch>

Controlled vs Uncontrolled

You can use the ToggleSwitch as a controlled component by providing both the checked prop and an onChange handler:

const [isEnabled, setIsEnabled] = useState(false);

const handleToggleChange = (event) => {
  setIsEnabled(event.target.checked);
};

<ToggleSwitch 
  checked={isEnabled}
  onChange={handleToggleChange}
>
  Feature enabled
</ToggleSwitch>

Or as an uncontrolled component using defaultChecked:

<ToggleSwitch defaultChecked={true} onChange={handleChange}>
  Feature enabled by default
</ToggleSwitch>

Note that when a toggle switch is disabled (disabled={true}), the onChange event will not be triggered.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Custom styled toggle

<ToggleSwitch classes="shadow-m-light">
  Custom styled toggle
</ToggleSwitch>

API

QtmToggleSwitch

Property	Type	Default	Description
checked	boolean	false	If true, the toggle is checked.
classes	string	''	list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"neutral" | "primary"	'primary'	The color of the toggle switch
defaultChecked	boolean	false	If true, the component is checked by default.
disabled	boolean	false	If true, the component is disabled.
displayIcon	boolean	false	If we want the icon displayed on the toggle
iconOff	string		The icon on the left side when toggle is switched off. You can find the icon name on material icon. You have to set the icon displayed
iconOn	string		The icon on the right side when toggle is switched on. You can find the icon name on material icon. You have to set the icon displayed
inputId	string		input id of the toggle switch
labelPosition	"" | "left" | "right"	''	The position of the label
name	string		Name of the toggle switch
size	"large" | "medium" | "small"	'medium'	The size of the toggle switch

Event	Type	Description
onValueChanged	CustomEvent<ToggleSwitchDetail>	Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail