Usage & Type
Labels are texts that describe associated input elements. The label control creates a firm connection between the descriptive text and the respective element.
Figure 1: Example of a label with its corresponding input element
Usage
Labels are simple text elements that can be used for descriptive texts. Labels can wrap and spread over multiple lines. Use labels to describe input elements, such as, dropdown list boxes , input fields , list boxes , and item lists . Checkbox and radio button controls already include their own labels.
Required Fields
Set the label to required if the input field is required.
Positioning
Typically, labels are placed in front of the input element they describe (figure 1). In some cases, labels may be placed above the corresponding input element (figure 2). See also the special case for input fields below (figure 3).
Figure 2: Label above a text edit control
Size
The label control can be set to two sizes, standard and small. Use the sizes depending on the context of the label, that is, use the standard size if the surrounding fields are standard size, use small if the surrounding fields are small.
There is one exception to this rule: You may use small labels if you place the labels above input fields to achieve a more compact design (figure 3).
Figure 3: Use small labels for labels that are placed above their associated input fields
Relation to Text View
Do not use the text view control as a label because only the label establishes a connection between the description and the corresponding input element. This connection is mandatory for achieving accessibility.
Help Texts
Help texts are special descriptions that are placed behind or, if space is limited, below and left-aligned with input fields (figure 4). Do not use the label control for help texts. Use the text view control, instead. Set the help text size to small (style Legend).
Figure 4: A small label used in conjunction with a small help text below the associated input fields - do not use the label control for the help text (below the input field)
Design-relevant Attributes
The appearance of the label control can be determined through several attributes. The attribute design allows to set the size of the label: design = LABEL sets the standard size, design = LABELSMALL sets the small size. The attribute labelFor established the connection to the associated input control. Further attributes set the width, wrapping behavior (Boolean attribute wrapping), text, and tooltip text of the label. The Boolean attribute required must be set to TRUE for labels that describe required fields
Related Controls
Dropdown List Box , List Box , Input Field , Text Edit , Text View , Item List