Checkbox

Checkboxes are used in forms to collect user input for a binary choice, such as whether an option is enabled or disabled.

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

Checkbox Properties

Component Properties

Property	Description
Label	Set the text to be displayed beside the checkbox
Label Text Style	Changes the style (font, size, etc.) of the checkbox's label text. Configure styles in the Typography settings
Label Text Color	Changes the color of the checkbox's label text
Default Selected	Choose if the checkbox should be selected or not by default
Visible	Set true to show and false to hide. Set dynamically using JavaScript with {{}}
Loading Animation	Controls the loading state of the component, values are a boolean
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