Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Text Fields

A text field can contain alphanumerical characters and special characters. They provide common keyboard and mouse events. If you want to render the output from these field components, use the respective ui:output components. For example, to render the output for the ui:inputPhone component, use ui:outputPhone.

Text fields are represented by the following components.

Type Related Components Description
Email ui:inputEmail An input field for entering an email address
ui:outputEmail Displays a clickable email address
Password ui:inputSecret An input field for entering secret text
Phone Number ui:inputPhone An input field for entering a telephone number
ui:outputPhone Displays a clickable phone number
Rich Text ui:inputRichText An input field for entering rich text

ui:outputRichText

 Displays rich text
Text ui:inputText An input field for entering single line of text
ui:outputText Displays text
Text Area ui:inputTextArea An input field for entering multiple lines of text
ui:outputTextArea Displays a read-only text area
URL ui:inputURL An input field for entering a URL
ui:outputURL Displays a clickable URL

Using the Text Fields

Text fields are typically used in a form. For example, this is a basic set up of an email field.

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputEmail aura:id="email" label="Email" placeholder="abc@email.com"/>

This example results in the following HTML.

1<div class="uiInput uiInputText uiInputEmail">
2  <label class="uiLabel-left uiLabel">
3    <span>Email</span>
4  </label>
5<input placeholder="abc@email.com" type="email" class="uiInput uiInputText uiInputEmail">
6</div>

You can also use the force:navigateToURL event to make an element behave like a URL link. For more information, see force:navigateToURL.

Note

Binding Field Values

You can bind field values to a field in an object using expressions such as {!v.myAttribute.Name} or {!v.myAttribute.namespace__MyField__c}, and saving an input value via an Apex controller. For an example, see Create A Standalone Lightning App.

Styling Your Text Fields

You can style the appearance of your text field and output. In the CSS file of your component, add the corresponding class selectors.

For example, to style the ui:inputPhone component, use .THIS .uiInputPhone, or .THIS.uiInputPhone if it’s a top-level element.

The following example provides styles to a ui:inputText component with the myStyle selector.

1swfobject.registerObject("clippy.codeblock-2", "9");<!-- Component markup-->
2<ui:inputText class="myStyle" label="Name"/>
3
4/* CSS */
5.THIS .myStyle { 
6  border: 1px solid #dce4ec;
7  border-radius: 4px;
8}