> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/form-elements/checkbox.md).

# Checkbox

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

<div align="left"><figure><img src="/files/P81pCGE28rZ0vk9p0CxY" alt="" width="356"><figcaption></figcaption></figure></div>

## Properties

<div align="left"><figure><img src="/files/UbjE9kSTd9jhceJ5RvxZ" alt="" width="289"><figcaption></figcaption></figure></div>

**Form item name:** This is the name that the **Custom Form** will use to access the output of the checkbox. See [Custom Form](/app-builder/app-construction/elements/form-elements/custom-form.md) 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](/app-builder/app-construction/elements/form-check.md) for data validation.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) 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]`.&#x20;

## 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&#x20;

   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](/app-builder/popular-use-cases/use-custom-form-container-to-collect-user-inputs.md)

## 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](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}