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.
VisibleControl widget's visibility on the page. When turned off, the widget isn't visible when the app is published
DisabledDisables input/selection to the widget. The widget remains visible to the user but user input/selection is not allowed.
Animate LoadingAllows you to control a widget’s animation on the page load.
HeightIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.

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 visible.{{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 (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.