Switch
A basic switch that can be toggled between a selected and unselected state.
Adding a Switch Component
- Select the Switch component from the Components drawer. You can open the list of components by clicking the
+
button next to Components. - Add a boolean variable in the Variables modal in the top panel. Set the value of this variable either
true
orfalse
.

- Select the Switch component from the Components tree.
- Go to the Data tab (third tab) in the Properties Panel.
- For the Initial Value property, select the boolean Global Variable.
- Then, go to the Interactions tab (fourth tab) in the Properties Panel.
- Add the action Set Variable.
- In the variable, select the Global Variable to assign its value to the Field name prop of the component. By default, it's called
switchValue
.
Configuration Properties
Property | Description |
---|---|
Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Switch. |
Active Track Color | Set the color of the Switch component when its value is true . |
Inactive Track Color | Set the color of the Switch component when its value is false . |
Active Thumb Color | Set the color of the thumb when the component value is true . |
Inactive Thumb Color | Set the color of the thumb when the component value is false . |
Data Configuration
Property | Description |
---|---|
Disabled | Remove toggle functionality, gray out the switch, and sets it as unselected. You can also initialize it by a boolean value from a data source. Accepted values: true or false . |
Data Source | Initialize the stateful component with a value from a data source. |
Updated 3 months ago