ui:outputText | Lightning Components Developer Guide

A ui:outputText component represents text output that is wrapped in an HTML span tag. We recommend using lightning:formattedText instead of ui:outputText.

ui:outputText can be used with ui:inputText, which takes in a text input. To apply Lightning Design System styling, we recommend that you use lightning:input instead of ui:inputText.

To display text, you can use an attribute value and bind it to the ui:outputText component.

1<aura:attribute name="myText" type="String" default="some string"/>
2<ui:outputText value="{!v.myText}" />

The previous example renders the following HTML.

1<span dir="ltr" class="uiOutputText">
2    some string
3</span>

This example shows how you can bind data from an ui:inputText component. To apply Lightning Design System styling, we recommend that you use lightning:input instead of ui:inputText.

1<aura:component>
2    <aura:attribute name="myText" type="string" default="Hello there!"/>
3 <ui:inputText label="Enter some text" class="field" value="{!v.myText}" updateOn="click"/>
4 You entered: <ui:outputText value="{!v.myText}"/> 
5</aura:component>

Attributes

Attribute Name	Attribute Type	Description	Required?
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`title`	String	Displays extra information as hover text.
`value`	String	The text displayed when this component is rendered.	Yes

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	The event fired when the user double-clicks the component.
`mouseover`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`mouseout`	COMPONENT	The event fired when the user moves the mouse pointer away from the component.
`mouseup`	COMPONENT	The event fired when the user releases the mouse button over the component.
`mousemove`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`click`	COMPONENT	The event fired when the user clicks on the component.
`mousedown`	COMPONENT	The event fired when the user clicks a mouse button over the component.