# Checkbox

Pole wyboru

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/TRmP5vFyGarh4tlZhDkv/13_files/image2025-5-14_14-13-46.png)

✅ **Kiedy stosować:**

* Istnieje możliwość zaznaczenia więcej niż jednej opcji.

:x: **Kiedy nie stosować:**

* Wybór ma być tylko jeden z kilku wariantów. **Stosuj**: [Radio](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio).

## Właściwości komponentu

| Właściwość Eximee Designer                                | Nazwa atrybutu w Źródle | Opis                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Zaznaczenie przycisku** (sekcja **Pozostałe**)          | checked                 | Określa, czy pole domyślnie ma być zaznaczone (początkowo ustawiona na "false"). Odpowiednik wartości domyślnej dla innych pól.                                                                                                                                                                                                              |
| **Wartość zaznaczonego przycisku** (sekcja **Pozostałe**) | valueYes                | Wartość, jaką przyjmuje checkbox kiedy jest zaznaczony - domyślnie, jeśli nie zostanie ustawiona inna wartość zwracana jest wartość "true".                                                                                                                                                                                                  |
| **Wartość odznaczonego przycisku** (sekcja **Pozostałe**) | valueNo                 | Wartość, jaką przyjmuje checkbox kiedy jest odznaczony - domyślnie, jeśli nie zostanie ustawiona inna wartość zwracana jest wartość "false".                                                                                                                                                                                                 |
| **Ustawienie pola wyboru** (sekcja **Pozostałe**)         | tickPosition            | <p>Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.<br><br>Domyślnie pusta (ustawiona na <strong>DEFAULT</strong>), umieszcza pole wyboru na środku komponentu w orientacji pionowej. Ustawiona na <strong>TOP</strong> umieszcza pole wyboru na górze komponentu w orientacji pionowej.</p> |
| **Treść** (sekcja **Podstawowe właściwości**)             | text                    | Tekst wyświetlany przy komponencie. Jest możliwe odwołanie się do zmiennych lub pól np.: ${sessionVariable1} lub ${GesTextField1}                                                                                                                                                                                                            |
| **Opis** (sekcja **Pozostałe**)                           | description             | <p>Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.<br><br>Określa opis biznesowy pola - sposób wyświetlenia zależy od konkretnej implementacji komponentu.</p>                                                                                                                              |

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

## Zasilenie tekstu checkboxa różnymi treściami

Jeśli tekst obok checkboxa należy uzależnić od warunku i wyświetlać różny (lub sformatowany), można zasilić go treścią z komponentu Treść (TextContent). Należy w tym celu podpiąć na checkboxie w polu **Źródło danych zewnętrznych** usługę *TextContentService*, w której jako komponent parametru wejścia podajemy artefakt zawierający tekst do wyświetlenia. W parametrach wyjściowych dla atrybutu **text** i **value** wybieramy parametr wyjścia **artifact**.

Przycisk kierujący do szczegółowych informacji można umieścić wewnątrz Treści (TextContentu) umieszczając w niej znacznik `_\<div class="ex-checkbox-more-info-label">\</div>._&#x20;`

Treść definiowana w **moreInfoLabel** może być definiowana dynamicznie (na przykład zasilana z Pola tekstowego lub innego komponentu umieszczonego na wniosku).

## Informacje o stanie komponentu

Informacje o aktualnej wartości danej właściwości komponentu, którą można następnie wykorzystać na wniosku np. do zasilenia innego pola wartością tej właściwości, można uzyskać stosując konstrukcję ID\_COMPONENTU$NAZWA\_WŁAŚCIWOŚCI

Dla checkboxa można pobrać następujące właściwości:

| Klucz                     | Opis                                                                            |
| ------------------------- | ------------------------------------------------------------------------------- |
| **moreInfoButtonClicked** | true - jeśli chociaż raz kliknięto w link kierujący do szczegółowych informacji |

{% hint style="info" %}
Przykład: zasilenie właściwości **Źródło danych z innego pola** (valueSourceId) poprzez GesCheckbox1$moreInfoButtonClicked zwraca nam wartość true/false z informacją, czy checkbox został zaznaczony.
{% endhint %}

### Dostępne zdarzenia

| Nazwa       | Opis                                              |
| ----------- | ------------------------------------------------- |
| **CHECK**   | Zdarzenie emitowane podczas zaznaczenia checkboxa |
| **UNCHECK** | Zdarzenie emitowane podczas odznaczenia checkboxa |

### Dostępne akcje

Dokumentacja akcji: [Akcje](https://docs.eximee.com/budowanie-aplikacji/logika-biznesowa/przeplywy/akcje)

| Nazwa       | Opis                                                                                   |
| ----------- | -------------------------------------------------------------------------------------- |
| **CHECK**   | Zaznaczenie checkboxa. **UWAGA**: nie emituje zdarzenia CHECK                          |
| **UNCHECK** | Odznaczenie checkboxa. **UWAGA**: nie emituje zdarzenia UNCHECK                        |
| **TOGGLE**  | Zmiana wartości checkboxa na przeciwną. **UWAGA**: nie emituje zdarzeń CHECK i UNCHECK |

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FevJSNncq8QlHh8t07yrz%2Fimage2025-5-15_9-47-23.png?alt=media&#x26;token=5739076a-dd67-482b-8ae8-b230fbd00fe1" alt="" width="502"><figcaption><p><em><strong>Ilustracja 1.</strong></em> <em>Przykład pozycji checkboxa ustawionej na TOP i domyślnie (DEFAULT)</em></p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/kPYoP5Xph1pAVFA69V3i/13_files/image2025-5-15_9-48-55.png" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Przykładowy wyglądu komponentu na wniosku.</em></p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/oZTIdS5TqS0WI9dYE8Fr/13_files/image2025-5-15_9-50-33.png" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Przykładowy wygląd komponentu na wniosku w prezentacji switch.</em></p></figcaption></figure>

{% hint style="info" %}
Wnioski demo: demoCheckbox, demoPopup
{% endhint %}

{% hint style="info" %}
♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}