lightning:inputName

Represents a name compound field. This component requires API version 42.0 and later.

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.

1<aura:component>
2    <aura:attribute name="salutationOptions" type="List" default="[
3        {'label': 'None', 'value': 'None'},
4        {'label': 'Mr.', 'value': 'Mr.'},
5        {'label': 'Ms.', 'value': 'Ms.'},
6        {'label': 'Mrs.', 'value': 'Mrs.'},
7        {'label': 'Dr.', 'value': 'Dr.'},
8        {'label': 'Prof.', 'value': 'Prof.'},
9    ]"/>
10    <aura:attribute name="fields" type="List" default="['firstName', 'lastName']"/>
11    <div class="slds-size_1-of-2">
12        <lightning:inputName
13            aura:id="myname"
14            label="Contact Name"
15            firstName="John"
16            middleName="Middleton"
17            lastName="Doe"
18            informalName="Jo"
19            suffix="The 3rd"
20            salutation="Mr."
21            options="{!v.salutationOptions}"
22            fieldsToDisplay="{!v.fields}"
23        />
24     </div>
25</aura:component>

Usage Considerations

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.

1({
2    handleClick: function (cmp, event) {
3        var name = cmp.find("myname");
4        var isValid = name.checkValidity();
5        if(isValid) {
6            alert("Creating new contact for " + name.get("v.lastName"));
7        }
8        else {
9            name.showHelpMessageIfInvalid();
10        }
11    }
12})

Attributes

Attribute Name	Attribute Type	Description
`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.

Lightning Components Developer Guide

lightning:inputName

Attributes