# Checkbox

The UI component **Checkbox** allows the user to easily input data of type `boolean`. You can bind this UI component to a property, which can allow you to persist this user input to the database. They serve a similar function to the [**Switch**](https://docs.appfarm.io/library/ui-components/switch) component.

{% hint style="info" %}
You can see an example setup of the Checkbox in the UI Components App in our [Showroom](https://showroom.appfarm.app/ui-components/checkbox)! You can try the component, as well as access the setup in Appfarm Create. If you do not have access, you can register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Settings

Here are some of the properties in Appfarm Create which are custom for the **Checkbox**:

### Value

The data source property or variable that the user input is bound to. This must be of data type `boolean`. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property.

{% hint style="warning" %}
A property of data type `boolean` is not automatically true or false by default. **A boolean property is by default `undefined`**. Binding a checkbox to such a property will display similarly to `false`. Once checked, the property is set to `true`. Once unchecked, the property is set to `null`. This behaviour can be seen with an example in the [Showroom](https://showroom.appfarm.app/ui-components/checkbox).

Unless you want a boolean property to have more than 2 states (true or false) it is recommended to **have a default value** (see [Value on Create](https://docs.appfarm.io/reference/data-model/object-classes#general-properties-1)) set to `false` or `true`.

To make sure that you handle undefined, null and false the same way, it is also recommended to **use the following pattern in conditions** or filters to represent "equals false": **Use `NOT EQUALS true`**.

<img src="https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FImqWzHUPUwQHvCV5AY6C%2Fimage.png?alt=media&#x26;token=7ef153ee-28ca-408c-820d-66cedf02eba0" alt="" data-size="line">
{% endhint %}

### Label

This text gives further information about what the **Checkbox** means when it is either ticked or left unticked. This can be static text or bound to a data source, while a JavaScript can also be used to display more helpful and intuitive output to the user.

### Auto Focus

When selected, this component will gain focus automatically when the screen is rendered.

### Tab Index

Users can use the `Tab` key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current **Checkbox**. This value should only be given when you want to override the default tab index. Using a tab index of `-1` will remove the component from the tab index.

### Appearance

**Color**

The colour of the component can be configured to Primary, Secondary or Default. Primary and Secondary refer to the primary and secondary colours of the chosen app theme, while Default does not change the colour of the checkbox.

**Margin**

Three choices are available for this property. These define the margin style between this component and other UI components on the screen.

* Normal
* Dense
* None

**Size**

Checkboxes can be of size `Small` or `Medium`. An example of the difference between small and medium sizes is available in the [Showroom](https://showroom.appfarm.app/ui-components/checkbox).

**Label Placement**

Labels can be configured to appear at the `Start`, `End`, `Top` or `Bottom` of the **Checkbox** component.

### Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the Checkbox component:

**On Value Change**: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, if the data input changes from false to true, or vice versa, a specific action can be performed.