UI5 Web Components
Search

Label

@ui5/webcomponents
<ui5-label>

Basic Label

The quick brown fox jumps over the lazy dog. 
<ui5-label>Simple Label</ui5-label>

Required Label

Required Label 
<ui5-label required>Required Label</ui5-label>

Required Label With Colon

Required Label 
<ui5-label required show-colon>Required Label</ui5-label>

Truncated Label

Long labels are truncated by default. 
<ui5-label style="width:200px">Long labels are truncated by default.</ui5-label>

Wrapped Label

Long labels can wrap if the 'wrapping-type="Normal"' property is set. 
<ui5-label style="width:200px" wrapping-type="Normal">Long labels can wrap if the 'wrapping-type="Normal"' property is set.</ui5-label>

Label 'for'

First name
Date of birth
Job Manager Sales Developer
Description label test
Accept terms of use 
<ui5-label id="myLabel" for="myInput" required show-colon>First name</ui5-label>
<ui5-input id="myInput" required placeholder="Enter your name"></ui5-input>
<ui5-label id="myLabel2" for="myDP" required show-colon>Date of birth</ui5-label>
<ui5-date-picker id="myDP" required></ui5-date-picker>
<ui5-label id="myLabel3" for="mySelect" required show-colon>Job</ui5-label>
<ui5-select id="mySelect" required>
	<ui5-option>Manager</ui5-option>
	<ui5-option>Sales</ui5-option>
	<ui5-option selected>Developer</ui5-option>
</ui5-select>
<ui5-label id="myLabel4" for="myTextArea" required show-colon>Description label test</ui5-label>
<ui5-textarea id="myTextArea" required placeholder="Type as much text as you wish"></ui5-textarea>
<ui5-label for="myCB" required show-colon>Accept terms of use</ui5-label>
	<ui5-checkbox id="myCB" required></ui5-checkbox>

Overview

The ui5-label is a component used to represent a label, providing valuable information to the user. Usually it is placed next to a value holder, such as a text field. It informs the user about what data is displayed or expected in the value holder.

The ui5-label appearance can be influenced by properties, such as required and wrappingType. The appearance of the Label can be configured in a limited way by using the design property. For a broader choice of designs, you can use custom styles.

ES6 Module Import

import "@ui5/webcomponents/dist/Label";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
for
string
""
Defines the labeled input by providing its ID.

Note: Can be used with both ui5-input and native input.
required
boolean
false
Defines whether an asterisk character is added to the component text.

Note: Usually indicates that user input (bound with the for property) is required. In that case the required property of the corresponding input should also be set.
showColon
show-colon
boolean
false
Defines whether colon is added to the component text.

Note: Usually used in forms.
wrappingType
wrapping-type
WrappingType
"None"
Defines how the text of a component will be displayed when there is not enough space. Available options are:
  • None - The text will be truncated with an ellipsis.
  • Normal - The text will wrap. The words will not be broken based on hyphenation.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel