# Checkbox

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-cbd4246c0ffea0d65b0f519d519d6a53210149e0%2Fcheckbox-web-control-v184-0.png?alt=media)

The Checkbox Web Control is an Input control that allows the selection of a single value.

## Properties

### General

#### Input ID

Expects type `text`.

The Input ID assigned to the Checkbox. This Input ID can tied to a [Label](label-web-control) so that clicking on the associated Label will allow users to select the Checkbox.

For more on how to use the Input ID, see [Connecting Labels to Input Controls](../building-apps/accessibility/connecting-labels-to-input-controls).

### Data Binding

#### Value

Expects type `any`.

The value that the bound variable will have when the checkbox is selected. When the checkbox is not selected, the value of this bound variable will be `NULL`.

#### Selected

Expects type `boolean`.

By default, a Variable of type [Boolean](../variable-data-types/the-boolean-variable-data-type) is generated at the Web Page level to store the data from the input. Users can also edit the Data Binding property and create their own Variables.

### Accessibility

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the checkbox will be visible. If `FALSE` the checkbox will not be displayed. If the field is empty, the checkbox will be visible.

#### Is Disabled

Expects type `boolean`.

If `TRUE` the checkbox will be disabled and the user will not be able to interact with the control. If `FALSE` the checkbox will be enabled. If the field is empty, the checkbox will be enabled.

## Style

Checkboxes have styles for the following states:

**Default** - When first rendered without state\
**Hover** - When the user is hovering over the Checkbox\
**Focused** - when the Checkbox is focused\
**Pressed** - when the Checkbox is being pressed\
**Selected** - when the Data Binding evaluates to true\
**Disabled** - When the Checkbox is disabled

Check [Common style properties of web controls](../styling/styling-overview/web-control-styling-properties) for further details on how to style your Checkbox Web Control.

## Actions

#### Value Changed

This event is run each time the checkbox is selected or unselected.

Metadata about this event can be accessed through the `event` namespace.

## Example #1

Checkboxes are commonly used for a single selection. Here, the Checkbox operates by itself, so add the Checkbox, and an automatically generated variable will hold its value.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-99721e491d0252e3edb25f73aa426effe787d362%2Fcheckbox-web-control-v184-1.png?alt=media)

## Example #2

To be able to align the Checkbox with a line of text, a [Selectable Container](selectable-container) Web Control must be added first. Then add the Checkbox and Label describing the item it corresponds to.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-94238d2dc268585631fd2c71e5bde8879e1cfb32%2Fcheckbox-web-control-v184-2.png?alt=media)
