Toggle Switch (Legacy)
The Toggle Switch (Legacy) component lets users turn an option on or off.
This is a legacy component. You'll find it in the Legacy section of the components panel. Check out the new version of the toggle switch component here.
Properties​
Property | Description | Expected Value |
|---|---|---|
| Label | The text shown next to the switch. | String (e.g., Enable notifications). Default: Toggle label. |
| Default status | Whether the switch is on when the app loads. | Use the toggle or click fx and enter {{true}} or {{false}}. Default: {{false}}. |
Events​
Event | Description |
|---|---|
| On change | Triggers when the user turns the switch on or off. |
Check Action Reference docs to get the detailed information about all the Actions.
Component Specific Actions (CSA)​
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
Exposed Variables​
Variables | Description | How To Access |
|---|---|---|
| value | true when the switch is on, otherwise false. | Accessible dynamically with JS (for e.g., {{components.toggleswitchlegacy1.value}}). |
General​
Tooltip​
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Enter the text under the General accordion. Hovering over the component displays it as plain text.
Devices​
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles​
Style | Description | Default Value |
|---|---|---|
| Text color | The color of the label. | The theme's primary text color. |
| Toggle switch color | The color of the switch when it's on. | The theme's brand color. |
| Visibility | Shows or hides the component. Accepts {{true}} or {{false}}. | {{true}} |
| Disable | If set to {{true}}, users can't change the switch. | {{false}} |
General​
Style | Description | Default Value |
|---|---|---|
| Box shadow | Sets the box shadow of the component. | No shadow |
Advanced​
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
The Advanced section is available only if your plan has the Custom Styles feature enabled.
Any property having fx button next to its field can be programmatically configured.