Checkbox
Checkbox is a simple UI widget you can use when you want users to make a binary choice.
Click to expand

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 Checkbox widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.
Property
Description
Label
Sets the text shown within the widget.
Position
Sets whether the label of the checkbox is aligned to the left or right side of the widget.
Alignment
Sets whether the checkbox is aligned to the left or right side of the widget.
Default Selected
Sets whether the checkbox begins checked or unchecked by default.
Required
Sets whether the checkbox is a mandatory field. When the checkbox is within a Form widget, that Form's submit button will be automatically disabled until the Checkbox is checked.
Visible
Controls widget's visibility on the page. When turned off: The widget will not be visible when the app is published. It appears translucent when in Edit mode.
Disabled
Makes the widget un-clickable or unusable. The widget will remain visible to the user but user interaction will not be allowed.
Animate Loading
When turned off, the widget will load without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it.

Binding Properties

These properties allow you to bind your Checkbox widget with any other widget in queries or JS objects. The following table lists all the binding properties.
Binding Property
Description
isChecked
Represents whether the checkbox is currently checked (bool).
isDisabled
Reflects the state of the widget's Disabled setting (bool).
isVisible
Reflects the state of the widget's Visible setting (bool).

Events

You can define functions that will be called when these events are triggered in the widget.
Events
Description
onCheckChange
Sets the action to be run when the user checks/unchecks a checkbox. See a list of supported actions.

Styles

Style properties allow you to change the look and feel of the widget.
Style Property
Description
Text Color
Represents the widget's Text color setting as a CSS color value (string).
Text Size
Sets the font size of the widget's Label text. Accepts CSS font-size values.
Accent Color
Sets the widget's accent color, which appears as the fill color for the checkbox when checked. Accepts CSS color values.
Border Radius
Rounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Last modified 12d ago