# Checkbox

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

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FwmSDGv9mnYsfLDsXsHRZ%2Fimage.png?alt=media&#x26;token=82580dce-ab63-4c19-be51-f53e07c00b3e" alt="" width="356"><figcaption></figcaption></figure></div>

## Properties

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FLiWRLd86gUEfp4dBEmFR%2Fimage.png?alt=media&#x26;token=b29ad8fa-6a17-4a20-b49b-263d49cf8214" 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](https://docs.acho.io/app-builder/app-construction/elements/form-elements/custom-form "mention") 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](https://docs.acho.io/app-builder/app-construction/elements/form-check "mention") for data validation.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") 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](https://docs.acho.io/app-builder/popular-use-cases/use-custom-form-container-to-collect-user-inputs "mention")

## 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](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}