# Checkbox group - CheckboxGroup

{% hint style="info" %}
The availability of functionality depends on the license and may not be available in all deployments.
{% endhint %}

Checkbox group component powered by a dictionary or service

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/xKlEda8T6CdBMGM660B3/14_files/image2025-5-14_14-23-19.png)

## Component properties

| Eximee Designer property                                                       | Attribute name in Source | Description                                                                                                                             |
| ------------------------------------------------------------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Number of columns</strong><br>(section <strong>Layout</strong>)</p> | columns                  | The number of columns into which the checkboxes are to be distributed (empty by default, meaning they are arranged in a single column). |

> More information about the component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/MjJJSoDR5zwLtG77x1va/14_files/image2025-5-19_12-36-46.png" alt=""><figcaption><p><em><strong>Illustration 1.</strong> Example appearance of the component in the request.</em></p></figcaption></figure>

## Dictionary as a data source

The component can receive data from a dictionary. It is enough to attach a previously created dictionary in the field **External data source**.

## Script as a data source

In CheckboxGroup components in **EXTERNAL DATA SOURCE** (External Data Source) you can attach scripts that, apart from the **Id**, return different values depending on the selected input options. This makes it possible to define the contents of the displayed checkboxes in the group according to our needs and the dependencies introduced at the input in a dynamic way.\
We can define displaying a checkbox with an icon, description, additional description, link triggering a popup, popup title, popup content, number of checkboxes and their selection.

Example implementation of a feeding script that returns the defined field descriptions and icons depending on the selected input options:

{% code title="demo-checkbox-group-items-with-popup.js" expandable="true" %}

```javascript
function callService(context) {
    const isNullOrFalse = v => v === false || v === 'false' || v == null;
    const withoutDescription = context.getFirstParameter("withoutDescription");
    const withoutIconUrl = context.getFirstParameter("withoutIconUrl");
    const withoutPopupLinkText = context.getFirstParameter("withoutPopupLinkText");
    const withoutPopupContentHtml = context.getFirstParameter("withoutPopupContentHtml");
    const withoutPopupTitle = context.getFirstParameter("withoutPopupTitle");
    const withCount = +context.getFirstParameter("withCount") || 3;

    const items = [];
    for (let idx = 1; idx <= withCount; ++idx) {
        items.push({
            id: 'checkbox' + idx,
            text: 'Option ' + idx,
            description: isNullOrFalse(withoutDescription) ? 'Field description ' + idx : null,
            iconUrl: isNullOrFalse(withoutIconUrl) ? 'assets/icons_3d/CA019_ic3d_wallet.png' : null,
            popupLinkText: isNullOrFalse(withoutPopupLinkText) ? 'More' : null,
            popupContentHtml: isNullOrFalse(withoutPopupContentHtml) ? 'Text <strong>formatted</strong> <em>from service</em> in the popup.' : null,
            popupTitle: isNullOrFalse(withoutPopupTitle) ? 'Sample content' : null
        });
    }
    return items;
}

```

{% endcode %}

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FVhQQP65ijCH7OOUbmxRu%2Fimage.png?alt=media&#x26;token=d310effc-d03e-4ca5-981a-47793d1ea146" alt=""><figcaption><p><em><strong>Figure 2.</strong> Example of connecting outputs in a component powered by a script.</em></p></figcaption></figure>

{% hint style="info" %}
Demo implementation: demoGesCheckboxGroup
{% endhint %}