Skip to main content

Switch

The Switch is a simple UI widget you can use when you want users to make a binary choice.

How to use Switch Widget

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
Default SelectedThis value is a boolean that is set to true if the switch is turned on.
VisibleControls widget's visibility on the page. When turned off, the widget will not be visible when the app is published
DisabledDisables input/selection to the widget. The widget will remain visible to the user but user input/selection will not be allowed.
Animate LoadingAllows you to control a widget’s animation on the page load.

Binding Properties

These properties help you share values between widgets and also allow you to easily access the widget property within Queries or JS functions.

PropertyDescriptionCode Snippet
isDisabledThis value is a boolean that is set to true if the switch is disabled.{{widget_name.isDisabled}}
isSwitchedOnThis value is a boolean that is set to true if the switch is turned on.{{widget_name.isSwitchedOn}}
isVisibleThis value is a boolean that is set to true if the switch is set as visbile.{{widget_name.isVisible}}

Events

They are a set of actions that you can perform on the widget. The following table lists the actions:

EventsDescription
onChangeSets the action to be run when the user toggles the switch. See a list of supported actions

Label

The property hosts a group of configurations that you can use to associate a display name and define a placement for the widget. These properties are usually useful when you want to design forms that follow a defined alignment for your form fields and give a professional look to your forms. Below are the properties that you can use:

LabelDescription
LabelSets the label of the switch.
PositionSets the label position of the widget.
AlignmentSets the alignment of the widget.
Label StyleDescription
Text ColorAllows you to set text color for the label.
Text SizeAllows you to set the size of the label.
Label Font StyleAllows you to choose a font style, i.e., bold or italic.

Styles

Style properties allow you to change the look and feel of the widget.

Style
Accent colorSets the background color of the widget.