A lightning:inputField component displays an editable field based on the field type. For example, if fieldName references a date value, then a date field with a date picker is rendered. If fieldName references a picklist, then a dropdown menu displays values based on your record types.
This component inherits styling from form layout in the Lightning Design System.To create a record edit layout, use this component with lightning:recordEditForm and pass in a record ID and object API name. To create a record create layout, use this component with lightning:recordEditForm and pass in the object API name of the record you're creating. You don't need additional Apex controllers or Lightning Data Service as data refresh happens automatically. To support error handling, include the lightning:messages component. To support record edit and create, include a lightning:button with type="submit". You must provide a record type ID using the recordTypeId attribute on lightning:recordEditForm if you have multiple record types on an object and you don't have a default record type.
Here's an example that displays a record edit layout and a record view layout for a contact record. The record view is automatically updated when you make edits and press the Update record button.
<aura:component> <div style="width:500px"> <lightning:recordEditForm aura:id="recordViewForm" recordId="003R00000000000000" recordTypeId="012R00000000000000" objectApiName="Contact"> <lightning:messages /> <lightning:inputField fieldName="FirstName" /> <lightning:inputField fieldName="LastName" /> <lightning:inputField fieldName="Birthdate" /> <lightning:inputField fieldName="Phone" /> <!--Picklist--> <lightning:inputField fieldName="Level__c" /> <lightning:button aura:id="submit" type="submit" label="Update record" /> </lightning:recordEditForm> </div> <!-- Record Display --> <div style="width:500px"> <lightning:recordViewForm recordId="003R00000000000000" objectApiName="Contact"> <div> <lightning:outputField fieldName="Name" /> <lightning:outputField fieldName="Birthdate" /> <lightning:outputField fieldName="Phone" /> <lightning:outputField fieldName="Level__c" /> </div> </lightning:recordViewForm> </div> </aura:component>
For more information, see the lightning:recordEditForm documentation.
Usage ConsiderationsThe lookup type is supported in Lightning Experience only. When used in the mobile app, the lookup type is rendered as an input text field. The geolocation compound field is not supported. Read-only fields are displayed as input fields that are disabled.
Dependent picklists must be defined in your org before you can use them with lightning:inputField. Both controlling and dependent fields must be included in your component. This example uses LeadSource as the controlling field and Level__c as the dependent field.
<lightning:recordEditForm aura:id="recordViewForm" recordId="003R00000000000000" recordTypeId="012R00000000000000" objectApiName="Contact"> <lightning:messages /> <!--Other fields here--> <lightning:inputField fieldName="LeadSource" /> <lightning:inputField fieldName="Level__c" /> <lightning:button aura:id="submit" type="submit" label="Update record"/> </lightning:recordEditForm>
For more information, see Define Dependent Picklists in Salesforce Help.
For supported objects, see the User Interface API Developer Guide.
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. | |
fieldName | String | The API name of the field to be displayed. | |
value | String | The field value, which overrides the existing value. | |
onchange | Action | The action triggered when the input value changes. |