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​
showColon​
required​
wrappingType​
Slots​
default​
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.