Updated: June 6, 2019

Label

sap.m.Label

Intro

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

Label
Label "Name" in a form

Usage

Use the label control if:

  • You need a label for a control. We recommend that you always use labels for form controls.

Do not 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).

Types

There are two types of labels:

  • Required
  • Optional

To indicate that a field is required, set the required property to true. An asterisk is then added automatically in front of the label.

Required label in an editable environment (horizontal layout)
Required label in an editable environment (horizontal layout)
Result of a required label in a display-only environment
Result of a required label in a display-only environment
Optional label in an editable environment (vertical layout)
Optional label in an editable environment (vertical layout)
Result of an optional label in a display-only environment
Result of an optional label in a display-only environment

Behavior & Interaction

Hyphenation

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

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.

Developer 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.

Wrapping label
Wrapping label

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.
  • Do not use bold labels.
  • A label is not a help text: it must be meaningful, succinct, short, and descriptive.

Exceptions

The layout can sometimes be simplified by using a placeholder instead of the label control. This exception can be applied in the following cases:

  • When the form pattern is easily understood, such as on a login screen. Since this screen consists of only two input controls (User Name and Password), the labels do not have to be used.
  • When the form is extremely small and has fewer than three input fields. This can be the case for messages or small feedback forms.
  • In search fields. For more information, see Search.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation