# Checkbox

## Overview

This guide will show how to use a checkbox in your applications. See how easy it is to drag and drop the checkboxes onto your forms and connect them to your business logic. Checkbox can be modified, styled and even changed at runtime.

To see a live sample of the component you can go [here](https://samples-dev.samples.servoy-cloud.eu/solution/components?a=checkbox).

## Get Started

In the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor), drag the Checkbox component from the Pallet onto the form.

{% hint style="info" %}
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](https://docs.servoy.com/reference/servoy-developer/package-manager) and install it.
{% endhint %}

## Modifying a Checkbox at Design-Time

The checkbox, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the checkbox in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) to see a list of properties in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). Below are some common properties and how to set them at design-time.

{% hint style="info" %}
See the reference docs for [Checkbox](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox) for a complete list of its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox#properties).
{% endhint %}

### Setting the text

The text displayed on a checkbox can be modified by setting its [`text`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox#text) property. Most often, this will just be plain text. In this case, just enter the value into the editor or directly on the component by double-clicking it. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

### Setting the tooltipText

Checkboxes, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what value will be checked or unchecked. In this case, just enter the value into the editor. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

{% hint style="info" %}
Remember that text can also be dynamic, data-driven or localized. For more options, you can open edit the text property in the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).
{% endhint %}

### Styling

Like all components, a checkbox can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the `styleClass` property.

<img src="https://github.com/Servoy/gitbook/blob/master/guides/develop/application-design/ui-components/input-controls" alt="" data-size="original">For example, `styleClass="checkbox"`

If you are using Variants, then you can easily drag and drop variations of your checkbox onto your form.

## Handling Events

Like most components, checkbox have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a checkbox is the `onDataChange` event, which is triggered when the checkbox is clicked.

To Handle the event, double-click the value for the `onDataChange` property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/method-selection-wizard). You'll have the option select an existing Method or create a new Method. The method will be called when the component's `onDataChange` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.

```javascript
/**
 * Handle changed data, return false if the value should not be accepted.
 * JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope)
 *
 * @param oldValue
 * @param newValue
 * @param {JSEvent} event
 *
 * @return {Boolean}
 *
 * @private
 *
 * @properties={typeid:24,uuid:"4A599FE8-D13D-4E4E-88AE-9B40DF8434F5"}
 */
function onDataChange(oldValue, newValue, event) {
	// Enter custom code
	return true
}
```

{% hint style="info" %}
See the [Checkbox reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox) for comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox#events)
{% endhint %}

## Modifying a Checkbox at Runtime

Checkbox, like many components, can be modified at runtime through code. Below are a few examples of controlling a checkbox from code.

### Enabling / Disabling a Checkbox

You can easily change the `enabled` state of a checkbox at runtime.

```javascript
function  disableCheckbox(){
elements.myCheckbox.enabled = false;
}
```

## Calling Checkbox API Methods

Like most components, a checkbox has API methods which can be called from code. Below is an example of common API calls.

### Add CSS Style Class

You can easily add a style class to a checkbox using the `addStyleClass` method.

```javascript
function  AddStyleClassCheckbox(){
elements.myCheckbox.addStyleClass('mycssclass');
}
```

{% hint style="info" %}
See the [Checkbox Reference Docs](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox) for a complete list of programmable [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox#properties) and [methods](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox#api).
{% endhint %}

## Related Articles

The following articles are recommended for additional reading:

* [Checkbox Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/checkbox)
* [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes)
* [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui)