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 inherit the functionalities and events from ui:inputText and ui:input, including placeholder and size and 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.

Field Type Description Related Components
Email An input field for entering an email address. ui:inputEmail

ui:outputEmail
Phone An input field for entering a phone number. ui:inputPhone

ui:outputPhone
Text An input field for entering a single-line text. ui:inputText

ui:outputText

Using the Text Fields

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>

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.

The following class selectors provide styles to the string rendering of the text. For example, to style the ui:inputPhone component, use .THIS .uiInputPhone.

1swfobject.registerObject("clippy.codeblock-2", "9");.THIS.uiInputEmail { //CSS declaration }
2.THIS.uiInputPhone { //CSS declaration }
3.THIS.uiInputText { //CSS declaration }
4

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

1swfobject.registerObject("clippy.codeblock-3", "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}