Skip to main content

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

    Update Checkbox properties

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

    Use copy and paste to easily replicate checkboxes

  3. Drag checkboxes to be included inside a Form component

    Drag checkboxes into a form component

Use checkboxes with APIs​

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

    Reference a checkbox within an API

  2. Trigger API when checkbox is changed via onCheckChange

    Run an API on checkbox change

Checkbox Properties​

Component Properties​

PropertyDescription
LabelSet the text to be displayed beside the checkbox
Default SelectedChoose if the checkbox should be selected or not by default
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}
Loading AnimationControls the loading state of the component, values are a boolean
RequiredMakes checking this component mandatory, values are a boolean

Settable Properties​

Property Via Form / Via RunJSTypeExample Value
Is Checked / isCheckedbooleantrue

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:

PropertyDescription
Checkbox1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
Checkbox1.isDisabledReturns the boolean value of the component's disabled state (True, if it is disabled)
Checkbox1.isCheckedReturns 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.

PropertyDescription
onCheckChangeTrigger an action when the checkbox is clicked