Checkbox

Checkbox lets users select one or more options from a group of options.

Properties

Form item name: This is the name that the Custom Form will use to access the output of the checkbox. See Custom Form for how it's used.

Options: Options for radio button. The Value holds the actual value the checkbox takes (that will be able to be used from the output array) and Label holds the display name of that checkbox.

Default value: Select which option will be the default value.

Element Style

Border style: Toggling this on will create borders around each option.

Size: Choose the size of the checkbox. Options include, small, default, and large.

Disabled: When toggled on, users will not be able to select an option.

See Form Check for data validation.

See Tooltip for tooltip configurations.

Output

The output of a checkbox is an array of your selections. For example, if you select option2 and option3, the form item will be [option2.value, option3_value.value].

Build interactions

You need to build some interactions to use the output of form elements. Typically, there are two ways to access the output

1. Directly add action after event

   After you add an event and an action, use ${event.value} in action to access the output of the element.

2. Use form to collect form data

   See details in Use Custom Form Container to collect user inputs

Supported Events

Change Checkbox: Triggered when a user clicks one of the checkboxes.

Supported Actions

Set Value: Set the output value.

Set Validate Result: Set whether the input is valid.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.