Intro

A label is the name or title of a control or group of related controls.

Every field needs a label. If you use one label for a group of fields, use a combined label and invisible text to label the single fields.

Label 'Name'

When to Use

false

Use the label control if:

You need a label for a control.
Always use labels for form controls.

dont

false

Don’t use the label control if:

You want to insert a heading in the column header of a table.
You want to use it as an alternative for the text control. Do not use the label control to display the data (for example, in display-only forms).

Anatomy

Text: Describes the data displayed or expected in the corresponding component or group of components.
Asterisk (optional): The asterisk (*) indicates that user input is required.
Colon: The colon (:) follows the label text.

Anatomy of the label control

Types

The default label does not include the optional "Required" indicator, allowing the user to proceed without providing input in the corresponding field or fields.

Optional Fields

The label indicates whether an entry is optional or mandatory (“required”) in edit mode.

Label for optional fields in edit and view mode

Required Fields

If a field is required, an asterisk is shown after the label text. The asterisk is only visible in edit mode, and not in display mode.

Label for required fields in edit and view mode

hint

To indicate that a field is required, set the required property to true.

Label Placement

In forms, you can place the label above the field value (recommended), or right-align the label next to the field value. For more information, see Label Alignment.

The position of a label can depend on the screen size. For example, the labels in a form can appear next to the input fields on larger screens, but move above the input fields when the screen size is reduced.

Labels next to the field and labels above the field (recommended)

Styles

For better differentiation of labels and values, labels are displayed differently in a display-only environment than in an editable environment.

Wrapping

Automatic wrap only applies to labels within forms to avoid truncation.

Do not use wrapping to enable long labels. Instead, keep your labels short: a label is not a help text. It must be meaningful, succinct, short, and descriptive. For more information about the responsive behavior of text, see Wrapping and Truncating Text.

Labels in a form (horizontal alignment)

hint

The boolean wrapping property for the sap.m.Label control determines whether or not the text wraps.

Note: Only use this property in forms.

Hyphenation

The label control also supports hyphenation for wrapped texts (property: wrappingtype = Hyphenated). Switching on hyphenation activates it for all languages that have hyphenation support.

changes

In the future, we plan to apply hyphenation only to a predefined set of languages (for example, languages that have a lot of long or compound words).

This will avoid unnecessary hyphenation in languages that have shorter words, such as English.

Guidelines

Always use a label for form controls.
Always set the vertical alignment for labels that display outside a form and flex box (property: VAlign). You can set the vertical alignment in tables and object page header facets, for example.
Use title case for labels.
Do not use a placeholder (input prompt) instead of a label. In certain cases, you can use a placeholder instead of a label to simplify the layout, such as in search fields. For more information, see Search.
You can display labels in bold text, but we recommend using the regular font weight.
A label is not a help text: it must be meaningful, succinct, short, and descriptive.

Reserve space for translation. For more information, see UI Text Space Calculator.