Skip to main content

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.

PropertyDescription
LabelSets the text shown within the widget.
PositionSets whether the label of the checkbox is aligned to the left or right side of the widget.
AlignmentSets whether the checkbox is aligned to the left or right side of the widget.
Default SelectedSets whether the checkbox begins checked or unchecked by default.
RequiredSets 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.
VisibleControls 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.
DisabledMakes the widget un-clickable or unusable. The widget will remain visible to the user but user interaction will not be allowed.
Animate LoadingWhen 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.
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 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 PropertyDescription
isCheckedRepresents whether the checkbox is currently checked (bool).
isDisabledReflects the state of the widget's Disabled setting (bool).
isVisibleReflects 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.

EventsDescription
onCheckChangeSets 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 PropertyDescription
Text ColorRepresents the widget's Text color setting as a CSS color value (string).
Text SizeSets the font size of the widget's Label text. Accepts CSS font-size values.
Accent ColorSets the widget's accent color, which appears as the fill color for the checkbox when checked. Accepts CSS color values.
Border RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.