Switch Row

A Switch component that can be toggled between a selected and unselected state and allows you to define a label.

Adding a Switch Component

  • 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 true or false.
800800
  • 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 Layout tree. Defaults to Switch Row.

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.

Direction

Set the direction of label and switch component using a dropdown menu.

Values: row (default) and row-reverse.

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

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.

Accepted values: true or false.

Initial value

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


Did this page help you?