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
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
andCmd/Ctrl + V
to copy / paste additional checkboxesUpdate 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
Checkbox Properties
Component Properties
Property | Description |
---|---|
Label | Set the text to be displayed beside the checkbox |
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 |
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 |