# Checkbox

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FU705DCWmECIIPcztkRk9%2Fimage.png?alt=media&#x26;token=e0f259e1-7000-4a30-a83e-1bb6e8888279" alt="" width="66"><figcaption><p>Checkbox Element</p></figcaption></figure></div>

The **`Checkbox`** element is a composite element consisting of an [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element and a [Label](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/label) element.

The included [Label](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/label) element is preconfigured with its [Associated Input ID](https://docs.zingy.ai/app-editor/page-editor/label#associated-input-id) set to the [Element ID](https://docs.zingy.ai/app-editor/page-element-settings#advanced-tab) of the included [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element.

{% hint style="warning" %}
[Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/toggle-switch) elements, used inside a Data Design element, need to be initialized using the [Initialize Toggle Switch in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design) block, after they are added to the page or form.
{% endhint %}

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

{% hint style="danger" %}
We do not recommend changing any setting other than the one's mentioned below.
{% endhint %}

### `Title`

Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element.

### `Form Field Name`

If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element.

### `Mandatory`

Set this to *yes* If you want to make sure a valid data is entered for this element. This is used in [forms](https://docs.zingy.ai/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page.