Long labels can wrap if the 'wrapping-type="Normal"' property is set.
First name Date of birth JobManagerSalesDeveloper Description label test
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
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.
Defines the labeled input by providing its ID.
Note: Can be used with both ui5-input and native input.
Defines whether an asterisk character is added to the component text.
Note: Usually indicates that user input is required.
Defines whether colon is added to the component text.
Note: Usually used in forms.
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.
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.
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:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast WhiteHorizon