Intro
https://www.sap.com/design-system/live-examples/Label/Label_LE_LabelsWithInputFields.html
Labels with input fields – live example
When to Use
Do
Use the label:
- If you need a label for a component or group of components.
- In forms.
Anatomy
- Text: Describes the data displayed or expected in the corresponding component or group of components.
- Colon: The colon (:) follows the label text.
- Asterisk (optional): The asterisk (*) indicates that user input is required.
Anatomy of the label
Types
Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.
Label for Required Entry (optional): The label shows the “Required” indicator (*) after the colon. To continue, the user must provide input in the corresponding component or components.
https://www.sap.com/design-system/live-examples/Label/Label_LE_Variants.html
Default label, label for a required entry
Responsive Behavior
Wrapping and Truncation
For labels within forms, use wrapping instead of 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.
https://www.sap.com/design-system/live-examples/Label/Label_LE_LabelsWithInputFieldsWrapping.html
Labels in a form – live example