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 inputProps={{ defaultChecked: true }}>
  Default color
</ToggleSwitch>
<ToggleSwitch color="primary" inputProps={{ defaultChecked: true }}>
  Primary color
</ToggleSwitch>
<ToggleSwitch color="neutral" inputProps={{ defaultChecked: true }}>
  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>

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

<ToggleSwitch displayIcon>Label</ToggleSwitch>

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

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

info

Icons are specified as strings representing their names from the Material Icons library, unlike other components where icons are typically provided as React components. 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.

<input> attributes

You can apply any standard <input> attributes (e.g., id, name, etc.) to the inner <input type="checkbox"> of the Toggle Switch component by using the inputProps prop.

<ToggleSwitch inputProps={{
    id: "checkbox-1",
    name: "checkbox-1"
  }}
/>

API

The ToggleSwitch component accepts all the props a standard <label> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.LabelHTMLAttributes<HTMLLabelElement>. See more about supported HTML props in React's documentation.

Loading API documentation...