# Etykieta - Text

Komponent prezentujący etykiety tekstowe.

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/Uhzz31zKBRvlDU9ZcfZU/Etykieta_files/image2025-5-16_13-8-8.png)

## Właściwości komponentu

| Właściwość Eximee Designer                                                                            | Nazwa atrybutu w Źródle | Opis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Treść** (sekcja **Podstawowe właściwości**)                                                         | text                    | Tekst Etykiety do wyświetlenia podczas prezentacji wniosku. Jest możliwe odwołanie się do zmiennych np. *${sessionVariable1}* lub *${GesTextField1}* oraz korzystanie ze wstawek JavaScript.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>Wyświetl jako paragraf</strong></p><p>(sekcja <strong>Podstawowe właściwości</strong>)</p> | displayAsParagraph      | <p>Checkbox kontroluje docelowy tag html, w którym będzie wyświetlany tekst:</p><ul><li>checkbox zaznaczony - kontrolka będzie wyświetlana w tagu</li><li>checkbox odznaczony - kontrolka będzie wyświetlana w tagu</li></ul><p><strong>Uwaga!</strong> Jeśli kontrolka ma ustawioną właściwość <strong>labelRef</strong> to wartość checkboxa jest ignorowana i używany jest tag</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Pole powiązane z etykietą** (sekcja **Interakcje**)                                                 | labelRef                | <p>Za pomocą właściwości <strong>Pole powiązane z etykietą</strong> możemy powiązać komponent z etykietą tekstową. Uzupełnienie właściwości (poprzez wybranie identyfikatora komponentu powiązanego z etykietą) pozwala na umożliwienie czytnikowi ekranu pominięcie czytania tej etykiety. Dodatkowo w kanale Angular zapewnia obsługę ustawiania focusu na powiązanym polu po kliknięciu w etykietę.</p><ul><li>jeśli etykieta dotyczy jednego komponentu → należy wybrać ten komponent z listy (np. dla <em>GesTextField5</em> etykietą jest <em>GesText7</em> — we właściwościach <em>GesText7</em> wybrać w <strong>labelRef</strong> komponent <em>GesTextField5</em>),</li><li>jeśli etykieta dotyczy wielu komponentów → należy wybrać komponent pierwszy lub ważniejszy dla grupy komponentów (przykład: kod pocztowy składa się z dwóch <em>TextFieldów</em>, należy wybrać jeden z nich)</li></ul><p>Identyfikator komponentu powiązanego z etykietą (w DOM za pomocą atrybutu for). Komponenty, które można powiązać:</p><ul><li>GesCaptcha,</li><li>GesCombobox,</li><li>GesDatePicker,</li><li>GesDateRangePicker,</li><li>GesPlusMinus,</li><li>GesSingleSlider,</li><li>GesStepSlider,</li><li>GesTextArea,</li><li>GesTextField,</li><li>GesRadioGroup,</li><li>GesCheckboxGroup</li></ul><p>Jeśli komponentu nie ma na liście oznacza to, że dla niego nie można ustalić właściwości <strong>Pole powiązane z etykietą</strong>.</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)

![Ilustracja 1. Wygląd komponentu na wniosku](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/iKUD1MZfaWIGuZRTYQub/Etykieta_files/image2025-5-19_12-26-32.png)

{% hint style="info" %}
Wniosek demo: demoKomponentyTekstowe oraz demoTekstowe
{% 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 %}