A lightning:inputName component is a name compound field represented by HTML input elements of type text. The Salutation field is a dropdown menu that accepts an array of label-value pairs.
This example creates a name compound field with a field for first name, middle name, last name, informal name, suffix. The Salutation dropdown menu displays "Mr." by default. The fieldsToDisplay attribute determines which fields are rendered.
<aura:component> <aura:attribute name="salutationOptions" type="List" default="[ {'label': 'None', 'value': 'None'}, {'label': 'Mr.', 'value': 'Mr.'}, {'label': 'Ms.', 'value': 'Ms.'}, {'label': 'Mrs.', 'value': 'Mrs.'}, {'label': 'Dr.', 'value': 'Dr.'}, {'label': 'Prof.', 'value': 'Prof.'}, ]"/> <aura:attribute name="fields" type="List" default="['firstName', 'lastName']"/> <div> <lightning:inputName aura:id="myname" label="Contact Name" firstName="John" middleName="Middleton" lastName="Doe" informalName="Jo" suffix="The 3rd" salutation="Mr." options="{!v.salutationOptions}" fieldsToDisplay="{!v.fields}" /> </div> </aura:component>
When you set required="true", a red asterisk is displayed on the Last Name field to indicate that it's required. An error message is displayed below the Last Name field if a user interacted with it and left it blank. The required attribute is not enforced and you must validate it before submitting a form that contains a name compound field.
Let's say you have a lightning:button component that calls the handleClick controller action. You can display the error message when a user clicks the button without providing a value for the Last Name field.
({ handleClick: function (cmp, event) { var name = cmp.find("myname"); var isValid = name.checkValidity(); if(isValid) { alert("Creating new contact for " + name.get("v.lastName")); } else { name.showHelpMessageIfInvalid(); } } })
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 class for the outer element, in addition to the component's base classes. | |
disabled | Boolean | Specifies whether the compound field should be disabled. Disabled fields are grayed out and not clickable. This value defaults to false. | |
fieldsToDisplay | List | List of fields to be displayed on the component. This value defaults to ['firstName', 'salutation', 'lastName']. Other field values include middleName, informalName, suffix. | |
firstName | String | Displays the First Name field. | |
informalName | String | Displays the Informal Name field. | |
label | String | Text label for the compound field. | |
lastName | String | Displays the Last Name field. This field is always displayed if you set required to true. | |
middleName | String | Displays the Middle Name field. | |
onblur | Action | The action triggered when the input releases focus. | |
onchange | Action | The action triggered when the value changes. | |
onfocus | Action | The action triggered when the input receives focus. | |
options | List | Displays a list of salutation options, such as Dr. or Mrs., provided as label-value pairs. | |
readonly | Boolean | Specifies whether the compound field is read-only. This value defaults to false. | |
required | Boolean | Specifies whether the compound field must be filled out. A red asterisk is displayed on the Last Name field. An error message is displayed if a user interacts with the Last Name field and does not provide a value. This value defaults to false. | |
salutation | String | Displays the Salutation field as a dropdown menu. An array of label-value pairs must be provided using the options attribute. | |
suffix | String | Displays the Suffix field. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
variant | String | The variant changes the appearance of the compound field. Accepted variants include standard and label-hidden. This value defaults to standard. |