Lightning Components Developer Guide
jNewer Version Available
lightning:inputName
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.
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.
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. |