Lightning Components Developer Guide
jNewer Version Available
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 |
|---|---|---|
| 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.
1<ui:inputEmail aura:id="email" label="Email" placeholder="abc@email.com"/>This example results in the following HTML.
1<div class="uiInput uiInputEmail uiInput--default uiInput--input">
2 <label class="uiLabel-left form-element__label uiLabel">
3 <span>Email</span>
4 </label>
5 <input placeholder="abc@email.com" type="email" class="input">
6</div>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.
1<!-- 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}