Loading
×Sorry to interrupt
CSS Error
Aura Component

Input Field

  • Represents an editable input for a field on a Salesforce object. This component requires API version 42.0 and later.

    Descriptor

    lightning:inputField

    Targets

    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.

Documentation
Specification