Input Field
Represents an editable input for a field on a Salesforce object. This component requires API version 42.0 and later.
Descriptor
lightning:inputFieldTargets
Lightning Experience, Experience Builder Sites, Salesforce Mobile App
Use the lightning:inputField
component in lightning:recordEditForm
to display and edit the value of a record field on a Salesforce object. Use the fieldName
attribute to specify the API field name.
For standard and custom objects, find the field names in Lightning Experience from Setup > Object Manager > (object-name) > Fields & Relationships. Standard object fields are documented in Standard Objects. See Supported Objects in lightning:recordEditForm for usage considerations about objects.
The component displays an editable field based on the data type for the field you specify. For example, fieldName="Birthdate"
on the Contact object references a date value, so the component renders an input field with a date picker and the label Birthdate. On the Account object, fieldName="Type"
references a picklist, so the component renders a dropdown menu with the label Type. The list shows the account types defined in the org.
In orgs that support multiple languages, lightning:inputField
automatically shows the translated labels and picklist values.
This component implements styling from form layout in the Lightning Design System.
For information about creating record edit forms, see lightning:recordEditForm.
Here's an example of a record edit form for creating an account record using the input fields for Name, Phone, and BillingAddress.
<aura:component> <div class="slds-p-around_medium"> <lightning:recordEditForm objectApiName="Account" onsubmit="{!c.handleSubmit}"> <lightning:messages /> <lightning:inputField fieldName="Name" /> <lightning:inputField fieldName="Phone" /> <lightning:inputField fieldName="BillingAddress" /> <lightning:button type="submit" name="Submit" label="submit" class="slds-m-top_medium"/> </lightning:recordEditForm> </div> </aura:component>
Prepopulating Field Values
To provide a custom value on a field when the form displays, use the value
attribute on lightning:inputField
. If you're providing a record ID, the value returned by the record on load does not override this custom value. You can also programmatically set the value when the form loads.
For more information, see lightning:recordEditForm.
Requiring a Value for a Field
lightning:inputField
supports requiredness specified on the server and client. In record forms, a required field is displayed with a red asterisk next to the field label. If you interact with a required field but don't enter a value, an error message is displayed below the field. Similarly, if you don't interact with a required field and try to submit the form, an error message is displayed.
To make an input field required on the server, mark the field Required in Setup. Input fields set as required on the server are universally required, to be displayed with a red asterisk wherever the input fields are used. For more information, see Require Field Input to Ensure Data Quality in Salesforce help.
To make an input field required on the client only, set required
attribute to true in lightning:inputField
. Use this attribute if you want to require a value in a field before the form can be submitted, and the field isn't marked required in Setup. If the field doesn't have a value, the component's client-side validation catches the error before the form data is submitted to the server.
The client-side required
setting and validation for requiredness is unrelated to the Required setting on the server. Note that you can't set required
to false in lightning:inputField
to disable the required setting on the server. The required field is still displayed with a red asterisk.
Resetting the Form
To reset the form fields to their initial values, use the reset()
method on each input field. For more information, see lightning:recordEditForm.
Overriding the Form Display Density
lightning:inputField
inherits the display density from the enclosing parent form. To override the display density of the parent form, use the variant
attribute on lightning:inputField
.
When the parent form uses the compact
density, you can reduce the whitespace between the label and field using the slds-form-element_1-col
class on lightning:inputField
.
For more information, see lightning:recordEditForm.
Field Types Supported
lightning:inputField
supports fields on objects that are UI API compliant. For supported objects, see the User Interface API Developer Guide.
Fields that have a spanning relationship aren't supported by lightning:inputField
. The fields specified must be associated with only one object. A field such as Contact.Account.Ownership is a cross-object reference between the Contact object and the Account object, and can't be displayed in the form.
The supported field data types are:
- Address: Displays the input address fields, without Google address search capability.
- Checkbox: Displays a checkbox input.
- Currency: Displays an input field for entering monetary data. The user’s Salesforce locale determines the currency symbol and separator characters used to format the number. Specifying a different locale is currently not supported for currency.
- Date: Displays an input field for entering a date. The date format is automatically validated against the user’s Salesforce locale. On mobile devices, date fields use native mobile date pickers.
- Date/Time: Displays input fields for entering a date and time. The date and time formats are automatically validated against the user’s Salesforce locale. On mobile devices, date and time fields use native mobile date and time pickers.
- Email: Displays an input field for entering an email address up to 80 characters. The email pattern is automatically validated. UTF-8 encoding is supported for entering an international email address.
- Geolocation: Displays input fields for entering latitude and longitude in decimal degrees. The latitude field accepts values within -90 and 90, and the longitude field accepts values within -180 and 180. See the Geolocation Fields section.
- Lookup: Displays an input field for creating a relationship between two objects, for example, the account associated to a contact record. On user lookup fields, the lookup value is displayed without a user icon. The lookup type is supported in Experience Builder sites, Lightning Experience, and the Salesforce mobile app. Creating a new record from the lookup field's dropdown menu is currently not supported. Lookups are not supported for the OwnerId, CreatedBy, and LastModifiedBy fields. Dependent lookups and external lookups are also not supported. Lookup fields work only for objects that are compliant with the User Interface API. A lookup from a supported object to an unsupported object or field is displayed as a text field. See the Lookup Fields section.
- Name: Displays one or more input fields for setting the name of a record. Input fields can include a single name field or multiple fields. For example, accounts might have a single name while contacts might have a salutation, first name, middle name, and last name. See the Name Fields section.
- Number: Displays an input field for entering a number, and formats for the user's Salesforce locale and currency. Number formatting is based on the Intl.NumberFormat object and follows ISO guidelines. For example, entering "123.45" displays "€123,45" if your org's currency is set to EUR and your Salesforce locale is German.
- Password: Displays an input field for entering a password. Characters you enter are masked after save.
- Percent: Displays an input field for entering a percentage.
- Phone: Displays an input field for entering a phone number up to 40 characters.
- Picklist and multi-select picklist: Displays a picklist or multi-select picklist. 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. See the Dependent Picklist Fields section. - Text: Displays text input, accepts up to 255 characters.
- Text (Encrypted): Displays the encrypted text input for up to 175 characters.
- Text Area: Displays multi-line text input for up to 255 characters.
- Text Area (Long): Displays multi-line text input for up to 131,072 characters.
- Text Area (Rich): Displays rich text input for bold or underline text, lists, and images for up to 131,072 characters including the formatting and HTML tags. Unsupported tags and attributes are removed and only their text content is displayed. For more information on supported tags, see Rich Text Editor in Salesforce Help.
- Time: Displays an input field for time selection in 15-minute increments. The time format is automatically validated against the user's Salesforce locale. On mobile devices, time fields use native mobile time pickers. For more information, see Time Custom Field in Salesforce Help.
- URL: Displays a URL input field which checks for a protocol such as http:// or ftp:// .
This component uses button
elements for picklists to comply with the Lightning Design System combobox blueprint for select-only comboboxes.
Dependent Picklist Fields
Dependent picklist fields depend on the value of another field, called the controlling field. As such, we recommend placing the controlling field before the dependent field. If you don't provide a controlling field, the picklist displays in a disabled and read-only state.
This example uses LeadSource
as the controlling field and Level__c
as the dependent field for a dependent picklist.
<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" class="slds-m-top_medium"/> </lightning:recordEditForm>
A dependent picklist should be lower on the page layout than its controlling field. You might encounter unexpected behavior if you place the dependent field before the controlling field on the page.
When using a record type with a dependent picklist, we don't recommend adding a default value that applies only to a specific controlling value. If you use a record type that has a default value set for the dependent picklist, this value is displayed in the picklist even though the controlling field might exclude the value.
For more information, see Define Dependent Picklists in Salesforce Help.
Geolocation Fields
Geocode fields and custom geolocation fields display as latitude and longitude fields.
To use a custom geolocation field, pass in the compound field. For example, pass in Account_Site__c
instead of Account_Site__latitude__s
and Account_Site__longitude__s
. This behavior is different from the limitation listed at Geolocation Custom Field.
<lightning:recordEditForm objectApiName="Account" recordId="001R00000000000000"> <lightning:inputField fieldName="Name" readonly="true"/> <lightning:inputField fieldName="Account_Site__c"/> <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" /> </lightning:recordEditForm>
Geocode fields like ShippingLatitude
and ShippingLongitude
are part of standard address fields, such as ShippingAddress
. Geocode fields aren't visible on records, so they won't display when you pass the address field ShippingAddress
to lightning:inputField
.
To use geocode fields, pass in both the latitude and longitude fields.
<lightning:recordEditForm objectApiName="Account" recordId="001R00000000000000"> <lightning:inputField fieldName="Name" readonly="true"/> <lightning:inputField fieldName="ShippingLatitude" /> <lightning:inputField fieldName="ShippingLongitude" /> <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" /> </lightning:recordEditForm>
For more information, see Geocode Fields and Accuracy in Salesforce Help.
Lookup Fields
Lookup fields associate two records together. For example, a case record can associate the case to a contact using the ContactId
field.
This example creates a new case using several text fields and a contact lookup field. The lookup field returns the selected contact Id using the onchange
event handler.
<lightning:recordEditForm objectApiName="Case" onsuccess="{!c.handleSuccess}"> <lightning:inputField fieldName="SuppliedName"/> <lightning:inputField fieldName="ContactId" onchange="{!c.handleChange}"/> <lightning:inputField fieldName="Description" /> <div class="slds-m-top_medium"> <lightning:button label="Create Case" type="submit"/> </div> </lightning:recordEditForm>
Use event.getParam("value")
to retrieve the Id of the selected contact record on the lookup field. Although the Id is returned in an array, multi-select lookups are currently not supported. To return the saved record, use the success
event. For more information on the success
event, see the lightning:recordEditForm documentation.
({ handleChange : function(component, event, helper) { var lookupId = event.getParam("value")[0]; }, handleSuccess : function(component, event, helper) { var record = event.getParam("response"); var apiName = record.apiName; // returns "Case" var caseId = record.id; // returns the Id of the new record }, })
Name Fields
Name fields are available on contact, lead, and user records.
A name compound field on records includes these constituent fields:
FirstName
MiddleName
LastName
Salutation
Suffix
The MiddleName
and Suffix
fields are not enabled by default. For more information, see User Fields in Salesforce Help.
The Salutation
field is available as part of the Name
compound field for contacts and leads. Passing in Salutation
to fieldName
directly is not supported.
The InformalName
field is not supported for editing on lightning:recordEditForm
.
This example displays the name compound field with Salutation
, FirstName
, MiddleName
, and LastName
fields to create a contact record. To create a lead record instead, set objectApiName="Lead"
.
<lightning:recordEditForm objectApiName="Contact"> <lightning:messages /> <lightning:inputField fieldName="Name" /> <!-- Other fields here --> <lightning:button class="slds-m-top_small" variant="brand" type="submit" label="Create contact" /> </lightning:recordEditForm>
To work with the user object, specify the constituent fields instead of using the Name
compound field.
<lightning:recordEditForm objectApiName="User"> <lightning:messages /> <lightning:inputField fieldName="FirstName" /> <lightning:inputField fieldName="MiddleName" /> <lightning:inputField fieldName="LastName" /> <lightning:button class="slds-m-top_small" variant="brand" type="submit" label="Create user" /> </lightning:recordEditForm>
Usage Considerations
When using lightning:inputField
with the fieldName
attribute, the field label for certain fields can differ from those displayed on a standard record page. For example, the Name
field on the opportunity object displays "Name" instead of "Opportunity Name" while the Name
field on the account object displays "Account Name".
Use lightning:inputField
only as a direct child of lightning:recordEditForm
. Don't nest lightning:inputField
components in another component.