A Switch component that can be toggled between a selected and unselected state and allows you to define a label.
- Select the Switch Row 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
- 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
|Component name||To alter the name of the component. The name is reflected in the Layout tree. Defaults to Switch Row.|
|Inactive Track Color||Set the color of the Switch component when its value is |
|Active Thumb Color||Set the color of the thumb when the component value is |
|Inactive Thumb Color||Set the color of the thumb when the component value is |
|Direction||Set the direction of label and switch component using a dropdown menu.|
|Active Track Color||Set the color of the Switch component when its value is |
|Label||Set the value of the label in the Switch Row component.|
You can also initialize the label value from a data source.
|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.|
|Data Source value||Initialize the stateful component with a value from a data source.|
Updated 3 months ago