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 or false.
800
  • 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

PropertyDescription
Component nameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Switch.
Active Track ColorSet the color of the Switch component when its value is true.
Inactive Track ColorSet the color of the Switch component when its value is false.
Active Thumb ColorSet the color of the thumb when the component value is true.
Inactive Thumb ColorSet the color of the thumb when the component value is false.

Data Configuration

PropertyDescription
DisabledRemove 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 SourceInitialize the stateful component with a value from a data source.