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.

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.
Field Name	Set the name of the field in the `onPress` function that controls toggling the switch value and its state If you have multiple switches on a screen, make sure to assign each one a different Field name. Without doing so, all switches will be toggled by a single user interaction.
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`.

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`.
Initial value	Initialize the stateful component with a value from a data source.

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.

Initial value

Initialize the stateful component with a value from a data source.