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
<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.
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.
<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 labelPosition attribute to right. By default, the toggle switch has labelPosition="left"
<qtm-toggle-switch>Label</qtm-toggle-switch>
<qtm-toggle-switch label-position="left">Label-left</qtm-toggle-switch>
<qtm-toggle-switch label-position="right">Label-right</qtm-toggle-switch>
An icon in the switch
You have the possibility to display icon in the switch. For that, you have to add display-icon attribute to your toggle switch
Label
Label
<qtm-toggle-switch size="small" display-icon>Label</qtm-toggle-switch>
<qtm-toggle-switch display-icon>Label</qtm-toggle-switch>
<qtm-toggle-switch size="large" display-icon>Label</qtm-toggle-switch>
By default, icons are a cross and a thickle. You can change that by adding properties below:
icon-onwith a name of the icon when the switch is toggle "on"icon-offwith 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
<qtm-toggle-switch color="primary" display-icon icon-on="lock_open" icon-off="lock">Label<qtm-toggle-switch>
<qtm-toggle-switch color="neutral" display-icon icon-on="face" icon-off="group">Label<qtm-toggle-switch>
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
qtm-toggle-switch
| 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 |
|---|---|---|
| value-changed | CustomEvent<ToggleSwitchDetail> | Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail |