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 the visibility of the component. When true, other components shift to fill its space; when false, it leaves blank space. 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

1. Drag a Checkbox component from the Components panel
2. In the Properties panel, change the Label to any text to identify the checkbox
3. Choose whether or not the checkbox is checked by default, via Default Selected

Copy and organize checkboxes

1. Cmd/Ctrl + C and Cmd/Ctrl + V to copy / paste additional checkboxes
2. Update labels to identify different options for the user to select

3. Drag checkboxes to be included inside a Form component

Use checkboxes with APIs

1. Create an API that references the checkbox via <CHECKBOX_NAME>.is_checked.

2. Trigger API when checkbox is changed via onCheckChange