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 'wrap' property is set.
<ui5-label style="width:200px" wrap>Long labels can wrap if the 'wrap' property is set.</ui5-label>
	

Label 'for'

First name
Date of birth
Job Manager Sales Developer
Description label test
Gender
Accept terms of use
<ui5-label id="myLabel" for="myInput" required show-colon>First name</ui5-label>
<ui5-input id="myInput" aria-required="true" aria-labelledby="myLabel" 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" aria-labelledby="myLabel2" aria-required="true"></ui5-date-picker>
<ui5-label id="myLabel3" for="mySelect" required show-colon>Job</ui5-label>
<ui5-select id="mySelect" aria-required="true" aria-labelledby="myLabel3">
	<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" aria-labelledby="myLabel4" aria-required="true" placeholder="Type as much text as you wish"></ui5-textarea>
<ui5-label for="myRB" required show-colon>Gender</ui5-label>
	<ui5-radiobutton id="myRB" group="a" text="Choice 1"></ui5-radiobutton>
	<ui5-radiobutton id="myRB2" group="a" selected text="Choice 2"></ui5-radiobutton>
<ui5-label for="myCB" required show-colon>Accept terms of use</ui5-label>
	<ui5-checkbox id="myCB"></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 wrap. 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 ui5-label text.

Note: Usually indicates that user input is required.
showColon
show-colon
boolean
false
Defines whether semi-colon is added to the ui5-label text.

Note: Usually used in forms.
wrap
boolean
false
Determines whether the ui5-label should wrap, when there is not enough space.

Note: By default the text would truncate.

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 ui5-label.
Note: –źlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel