Label - Text

A component presenting text labels.

Component properties

Eximee Designer property
Attribute name in the Source
Description

Content (section Basic properties)

text

Label text to display during the application presentation. It is possible to reference variables e.g. ${sessionVariable1} or ${GesTextField1} and use JavaScript snippets.

Display as paragraph

(section Basic properties)

displayAsParagraph

The checkbox controls the target HTML tag in which the text will be displayed:

  • checkbox checked - the control will be displayed in the tag

  • checkbox unchecked - the control will be displayed in the tag

Attention! If the control has the property labelRef then the checkbox value is ignored and the tag is used

Field associated with the label (section Interactions)

labelRef

Using the property Field associated with the label we can link the component with a text label. Filling in the property (by selecting the identifier of the component associated with the label) allows the screen reader to skip reading this label. Additionally, in the Angular channel it provides handling of focusing the associated field when clicking on the label.

  • if the label applies to a single component → select that component from the list (e.g. for GesTextField5 the label is GesText7 — in the properties GesText7 select in labelRef component GesTextField5),

  • if the label applies to multiple components → choose the first or most important component for the group of components (example: postal code consists of two TextFields, choose one of them)

Identifier of the component associated with the label (in the DOM using the for attribute). Components that can be associated:

  • GesCaptcha,

  • GesCombobox,

  • GesDatePicker,

  • GesDateRangePicker,

  • GesPlusMinus,

  • GesSingleSlider,

  • GesStepSlider,

  • GesTextArea,

  • GesTextField,

  • GesRadioGroup,

  • GesCheckboxGroup

If a component is not on the list it means that the property cannot be set for it Field associated with the label.

More information about component properties: Common component properties

Illustration 1. Component appearance on the application

Demo application: demoTextComponents

Last updated

Was this helpful?