Skip to main content

Label

The ui5-label is a component used to represent a label for elements like input, textarea, select. The for property of the ui5-label must be the same as the id attribute of the related input element. Screen readers read out the label, when the user focuses the labelled control.

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";

Basic Sample​

Properties​

for​

DescriptionDefines the labeled input by providing its ID.
Note: Can be used with both ui5-input and native input.
Typestring
Default""

showColon​

DescriptionDefines whether colon is added to the component text.
Note: Usually used in forms.
Typeboolean
Defaultfalse

required​

DescriptionDefines 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.
Typeboolean
Defaultfalse

wrappingType​

DescriptionDefines how the text of a component will be displayed when there is not enough space.
Note: for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
Type"None" | "Normal"
Default"None"

Slots​

default​

DescriptionDefines 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.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Text Truncation and Wrapping​

The Label truncates by default. To make it wrap - set wrapping-type="Normal".

Label with Input​

The Labes' for, required and showColon properties can be used to reference inputs.

Custom Styling​

The Labes can be customized with pure CSS, applied on the tag.