Checkbox
Checkboxes are used in forms to collect user input for a binary choice, such as whether an option is enabled or disabled.
Checkbox Properties
Component Properties
Property | Description |
---|
Content | |
Label | Set the text to be displayed beside the checkbox |
Default check | Choose if the checkbox should be selected or not by default |
Appearance | |
Label style | Changes the style (font, size, color, etc.) of the checkbox's label text. Configure styles in the Typography settings |
Load animation | Toggle whether or not to have a loading animation |
Layout | |
Width | Controls the width of the component |
Height | Controls the height of the component |
Visible | Controls the visibility of the component, values are a boolean |
Collapse when invisible | Controls what happens when the component is invisible. When true , other components shift to fill its space; when false , it leaves a blank space. This has no effect in edit mode. |
Interaction | |
Required | Makes checking this component mandatory, values are a boolean |
Settable Properties
Property Via Form / Via RunJS | Type | Example Value |
---|
Is Checked / isChecked | boolean | true |
Reference Properties
Properties can be accessed from other frontend components and backend APIs by adding the name of the Checkbox, and dot referencing the property. For a Checkbox named Checkbox1
:
Property | Description |
---|
Checkbox1.isVisible | Returns the boolean value of the component's visibility (True, if it is visible) |
Checkbox1.isDisabled | Returns the boolean value of the component's disabled state (True, if it is disabled) |
Checkbox1.isChecked | Returns the state of the checkbox (True, if it is checked) |
Events
The following events are triggered by user interactions with Checkbox components. Use event handlers to trigger actions in response to user events.
Property | Description |
---|
onCheckChange | Trigger an action when the checkbox is clicked |
Example Usage:
Set checkbox label and default selection
- Drag a Checkbox component from the Components panel
- In the Properties panel, change the Label to any text to identify the checkbox
- Choose whether or not the checkbox is checked by default, via Default Selected

Copy and organize checkboxes
Cmd/Ctrl + C
and Cmd/Ctrl + V
to copy / paste additional checkboxes
- Update labels to identify different options for the user to select

- Drag checkboxes to be included inside a Form component

Use checkboxes with APIs
- Create an API that references the checkbox via
<CHECKBOX_NAME>.is_checked
.

- Trigger API when checkbox is changed via onCheckChange
