ui:outputPhone

Displays the phone number in a URL link format.

A ui:outputPhone component represents a phone number output that is wrapped in an HTML span tag. We recommend using lightning:formattedPhone instead of ui:outputPhone.

ui:outputPhone can be used with ui:inputPhone, which takes in a phone number input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="tel" instead of ui:inputPhone.

The following example is a simple set up of a ui:outputPhone component.

<ui:outputPhone value="415-123-4567"/>

The previous example renders the following HTML.

<span>415-123-4567</span>

When viewed on a mobile device, the example renders as an actionable link.

<span>
    <a href="tel:415-123-4567">415-123-4567</a>
</span>
This example shows how you can bind data from a ui:inputPhone component. To apply Lightning Design System styling, we recommend that you use lightning:input with type="tel" instead of ui:inputPhone.
<aura:component>
    <ui:inputPhone aura:id="phone" label="Phone Number" value="415-123-4567" />
    <ui:button label="Submit" press="{!c.setOutput}"/> 

 <div aura:id="msg">
  You entered: <ui:outputPhone aura:id="oPhone" value="" />
 </div>
</aura:component>
({
   
    setOutput : function(component, event, helper) {
    	var cmpMsg = component.find("msg");
    	$A.util.removeClass(cmpMsg, 'hide');
       
        var phone = component.find("phone").get("v.value");
        var oPhone = component.find("oPhone");
        oPhone.set("v.value", phone);
    }
})

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.
value String The phone number 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.