# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/form-elements/checkbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.