# Label - Text

A component displaying text labels.

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

## Component properties

| Eximee Designer property                                                                       | Attribute name in Source | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Content** (section **Basic properties**)                                                     | text                     | Label text to display when presenting the application. It is possible to refer to variables, e.g. *${sessionVariable1}* or *${GesTextField1}* and use JavaScript inserts.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>Display as paragraph</strong></p><p>(section <strong>Basic properties</strong>)</p> | displayAsParagraph       | <p>The checkbox controls the target HTML tag in which the text will be displayed:</p><ul><li>checkbox selected - the control will be displayed in the tag</li><li>checkbox cleared - the control will be displayed in the tag</li></ul><p><strong>Note!</strong> If the control has the property <strong>labelRef</strong> set, the checkbox value is ignored and the tag is used</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Field associated with the label** (section **Interactions**)                                 | labelRef                 | <p>Using the property <strong>Field associated with the label</strong> we can bind the component to a text label. Filling in the property (by selecting the identifier of the component associated with the label) allows a screen reader to skip reading this label. Additionally, in the Angular channel it provides support for setting focus on the associated field after clicking the label.</p><ul><li>if the label applies to one component → select that component from the list (e.g. for <em>GesTextField5</em> the label is <em>GesText7</em> — in the properties <em>GesText7</em> select in <strong>labelRef</strong> component <em>GesTextField5</em>),</li><li>if the label applies to multiple components → select the first or most important component for the group of components (example: a postal code consists of two <em>TextFields</em>, select one of them)</li></ul><p>Identifier of the component associated with the label (in the DOM using the for attribute). Components that can be associated:</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>If the component is not on the list, it means that the property cannot be set for it <strong>Field associated with the label</strong>.</p> |

> 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)

![Figure 1. Appearance of the component in the application](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/iKUD1MZfaWIGuZRTYQub/Etykieta_files/image2025-5-19_12-26-32.png)

{% hint style="info" %}
Demo application: demoKomponentyTekstowe and demoTekstowe
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG good 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 %}