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.

<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>
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.

({
    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();
        }
    }
})

Attributes

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.