Label

<ui5-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

Description	Defines the labeled input by providing its ID. Note: Can be used with both ui5-input and native input.
Type	string | undefined
Default	undefined

showColon

Description	Defines whether colon is added to the component text. Note: Usually used in forms.
Type	boolean
Default	false

required

Description	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.
Type	boolean
Default	false

wrappingType

Description	Defines 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	"Normal"

Slots

default

Description	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.
Type	Array<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 ui5-label wraps by default. To truncate it - set wrapping-type="None".

Label with Input

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

Custom Styling

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