label - Label (control)

Displays text.

Category

Core Controls

Syntax

<xp:label attributes>content</xp:label>
Table 1. Essential properties
Property Description
id Defaults to label1, label2, and so on.
value Specifies the value of the label.
for Specifies the control that gets focus when the user clicks or otherwise puts focus on this control.
Table 2. All properties
Category Properties
accessibility accesskey, role, readonly, title
basics attrs, binding, dir, for, htmlFilter, id, lang, loaded, rendered, rendererType
data converter, value
events onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
styling disableTheme, style, styleClass, themeId

Usage

At run time, the value of the label appears on the page. Focus is redirected as specified.

A Label control is read-only if the containing XPage or Panel is read-only, or if the Label readonly property is true.

Examples

This Label control displays the common user name in blue:
<xp:label
	value="#{javascript:session.getCommonUserName()}"
	id="label1" style="color:rgb(0,0,255)" for="inputText1">
</xp:label>

Accessibility compliance

To apply labels in compliance with accessibility standards, use the Label control with the for property as shown below:
<xp:label value="foo" for="inputText1" />
&#160;
<xp:inputText id="inputText1" defaultValue="foo" />
Alternatively apply the aria-labelledby attribute as shown below. However, this attribute is not supported by browsers that do not support WAI-ARIA.
<xp:label value="foo" id="label1">
	&#160;
	<xp:inputText id="inputText1" defaultValue="foo" >
		<xp:this.attrs>
				<xp:attr name="aria-labelledby" value="#{id:label1}"></xp:attr>
		</xp:this.attrs>
	</xp:inputText>
</xp:label>
Alternatively apply the aria-label attribute as shown below. However, this attribute generates a hidden label.
<xp:label value="foo" id="label1">
	&#160;
	<xp:inputText id="inputText1" defaultValue="foo" >
		<xp:this.attrs>
				<xp:attr name="aria-label" value="bar"></xp:attr>
		</xp:this.attrs>
	</xp:inputText>
</xp:label>

In both alternative cases, use the full client-side identifier for the attribute value, as shown.