# Checkbox
Checkbox
✅ **When to use:**
* It is possible to select more than one option.
:x: **When not to use:**
* The selection is to be only one of several options. **Use**: [Radio](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio).
## Component properties
| Eximee Designer property | Attribute name in the Source | Description |
| ------------------------------------------------------ | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button selection** (section **Other**) | checked | Specifies whether the field should be selected by default (initially set to "false"). Equivalent to the default value for other fields. |
| **Value of the selected button** (section **Other**) | valueYes | The value taken by the checkbox when it is selected - by default, if no other value is set, the returned value is "true". |
| **Value of the deselected button** (section **Other**) | valueNo | The value taken by the checkbox when it is deselected - by default, if no other value is set, the returned value is "false". |
| **Checkbox setting** (section **Other**) | tickPosition |
Availability of the functionality depends on the license and may not be available in all deployments.
By default empty (set to DEFAULT), places the checkbox in the center of the component in vertical orientation. Set to TOP places the checkbox at the top of the component in vertical orientation.
|
| **Content** (section **Basic properties**) | text | Text displayed next to the component. It is possible to refer to variables or fields, e.g.: ${sessionVariable1} or ${GesTextField1} |
| **Description** (section **Other**) | description |
Availability of the functionality depends on the license and may not be available in all deployments.
Specifies the business description of the field - the display method depends on the specific implementation of the component.
|
> More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)
## Feeding the checkbox text with different content
If the text next to the checkbox should depend on a condition and display different (or formatted) content, it can be fed with content from the Content (TextContent) component. To do this, you need to connect on the checkbox in the field **External data source** service *TextContentService*, in which as the input parameter component we provide the artifact containing the text to be displayed. In the output parameters for the attribute **text** and **value** we select the output parameter **artifact**.
A button leading to detailed information can be placed inside the Content (TextContent) by placing the tag `_._ `
Content defined in **moreInfoLabel** can be defined dynamically (for example, fed from a Text Field or another component placed on the application).
## Component state information
Information about the current value of a given component property, which can then be used in the application, e.g. to feed another field with the value of that property, can be obtained using the structure COMPONENT\_ID$PROPERTY\_NAME
For a checkbox, the following properties can be retrieved:
| Key | Description |
| ------------------------- | --------------------------------------------------------------------------------- |
| **moreInfoButtonClicked** | true - if the link leading to detailed information has been clicked at least once |
{% hint style="info" %}
Example: feeding property **Data source from another field** (valueSourceId) via GesCheckbox1$moreInfoButtonClicked returns true/false indicating whether the checkbox has been selected.
{% endhint %}
### Available events
| Name | Description |
| ----------- | --------------------------------------------- |
| **CHECK** | Event emitted when the checkbox is selected |
| **UNCHECK** | Event emitted when the checkbox is deselected |
### Available actions
Action documentation: [Actions](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/logika-biznesowa/przeplywy/akcje)
| Name | Description |
| ----------- | --------------------------------------------------------------------------------------------- |
| **CHECK** | Selecting the checkbox. **NOTE**: does not emit the CHECK event |
| **UNCHECK** | Deselecting the checkbox. **NOTE**: does not emit the UNCHECK event |
| **TOGGLE** | Changing the checkbox value to the opposite. **NOTE**: does not emit CHECK and UNCHECK events |
Figure 1.Example of the checkbox position set to TOP and default (DEFAULT)
Figure 2. Example appearance of the component in the application.
Figure 3. Example appearance of the component in the application in switch presentation.
{% hint style="info" %}
Demo applications: demoCheckbox, demoPopup
{% endhint %}
{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}
