Input Field

force:inputField represents an input field that corresponds to a field on a Salesforce object. This component respects the attributes of the associated field. For example, if the component is a number field with 2 decimal places, then the default input value contains the same number of decimal places. It loads the input field according to the field type. If the component corresponds to a date field, a date picker is displayed in the field. Dependent picklists and rich text fields are not supported. State and country fields in addresses display as read-only fields. Required fields are not enforced client-side.

This example creates an input field that displays data for a contact name. Bind the field using the value attribute and provide a default value to initialize the object.

1<aura:component controller="ContactController">
2    <aura:attribute name="contact" type="Contact"
3               default="{ 'sobjectType': 'Contact' }"/>
4    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
5    <force:inputField aura:id="firstname" value="{!v.contact.FirstName}" change="{!c.handleChange}"/>
6    <force:inputField aura:id="lastname" value="{!v.contact.LastName}" change="{!c.handleChange}"/>
7</aura:component>

In this example, the v.contact.FirstName expression binds the value to the FirstName field on the contact. To load record data, wire up the container component to an Apex controller that returns the contact.

1public with sharing class ContactController {
2    @AuraEnabled
3    public static Contact getContact() {
4        return [select Id, FirstName, LastName from Contact Limit 1];
5    }
6}

Pass the contact data to the component via a client-side controller.

1({
2  doInit: function (component, event, helper) {
3    var action = component.get("c.getContact");
4    action.setCallback(this, function (response) {
5      var state = response.getState();
6      if (state === "SUCCESS") {
7        component.set("v.contact", response.getReturnValue());
8        console.log(response.getReturnValue());
9      }
10    });
11    $A.enqueueAction(action);
12  },
13
14  handleChange: function (cmp, event, helper) {
15    var firstname = cmp.find("firstname").get("v.value");
16    var lastname = cmp.find("lastname").get("v.value");
17  },
18});

Multi-select picklists display the API name of the field on the label, for example, MyPicklistField__c.

force:inputField doesn’t use the Lightning Design System styling. If you’re using force:inputField in a standalone app, this component doesn’t support Lightning Design System styling from force:slds.

change

The event fired when the user changes the content of the input field and leaves the field.