How do I correctly use force:inputField in a Lightning Component?
Question:
How can we properly use the standard Lightning component <force:inputField> in a Lightning component to behave like <apex:inputField>? According to documentation, <force:inputField> should automatically generate a field based on the metadata of the underlying SObject field. However, when I try to bind <force:inputField value="{!v.account.Name}" />, it does not render or throws an error. The attribute is declared with type="Account" and the Apex controller returns an Account record. Replacing it with <ui:inputText> works, which suggests the SObject is reaching the component. Is there something missing, and is there any required configuration to make force:inputField understand the SObject context?
When Lightning introduced <force:inputField> and <force:outputField>, these components were intended to behave similarly to Visualforce <apex:inputField> by rendering appropriate UI based on field metadata. However, in early releases these components were partially implemented and required extra help to understand what SObject type they should work with.
Even though you declared your aura attribute as type="Account", internally <force:inputField> did not automatically infer the SObject metadata. That is why it failed to render properly while <ui:inputText> worked, because <ui:inputText> does not need SObject metadata.
To make <force:inputField> work, you need to provide a default value that explicitly specifies the SObject type. This default is not just a placeholder; it is how the Lightning framework receives the metadata definition. The correct approach is to add a default object with the sobjectType key.
For example:
<aura:attribute name="account"
type="Account"
default="{ sobjectType: 'Account' }" />This gives the component the necessary hint that the attribute represents an Account record, so that <force:inputField> can read field definitions such as data type, picklist values, and lookup metadata.
Below is the original setup rewritten with the required default:
<aura:component controller="MyNamespace.AccountController" implements="force:appHostable">
<aura:attribute name="account" type="Account" default="{ sobjectType: 'Account' }"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<force:inputField value="{!v.account.Name}" />
</aura:component>In your client-side controller, you can continue to load the Account record:
({
doInit: function(component) {
var action = component.get("c.getAccount");
action.setCallback(this, function(response) {
component.set("v.account", response.getReturnValue());
});
$A.enqueueAction(action);
}
})
And in Apex:
public class AccountController {
@AuraEnabled
public static Account getAccount() {
return [SELECT Id, Name FROM Account LIMIT 1];
}
}
With the default value in place, Lightning now knows the metadata definition and <force:inputField> renders properly.
Additional example:
You can use the same pattern for other objects, as shown below for Task fields:
<aura:component implements="force:appHostable">
<aura:attribute name="task" type="Task" default="{ sobjectType: 'Task' }"/>
<force:inputField value="{!v.task.Subject}" />
<force:inputField value="{!v.task.Description}" />
<force:inputField value="{!v.task.Priority}" />
<force:inputField value="{!v.task.ActivityDate}" />
<force:inputField value="{!v.task.WhoId}" />
<force:inputField value="{!v.task.WhatId}" />
</aura:component>
This demonstrates that the component can render different field types automatically, such as lookups, dates and picklists, once the SObject metadata is supplied.
Known limitations in early releases:
Because this feature was still evolving, some UI behaviors were incomplete. For example, lookup fields were sometimes poorly styled, and picklists or multi-picklists might appear disabled even though values loaded correctly. These issues were not faults in your code but limitations of the Lightning component implementation at that time. They improved in later releases.
Conclusion:
To use <force:inputField> successfully, always provide a default SObject literal that includes sobjectType. This allows the Lightning component to access metadata and render the correct UI automatically, bringing it closer to the behavior of <apex:inputField> in Visualforce.
Kick Start Your Career with Real-Time Project-Based Salesforce Training
Our Salesforce Course is expertly designed to provide a deep understanding of the Salesforce platform, equipping you with essential skills to succeed in the CRM industry. The program includes vital modules such as Salesforce Admin, Developer, and AI, combining theoretical learning with hands-on application. By working on real-world projects and interactive assignments, you’ll develop the expertise to solve complex business challenges using Salesforce solutions. Our experienced instructors ensure you gain both technical proficiency and industry insights to thrive in the Salesforce ecosystem.
In addition to technical knowledge, our Salesforce Training in San Francisco offers personalized mentorship, certification guidance, and interview coaching to enhance your career opportunities. You’ll benefit from comprehensive study materials, live project experience, and dedicated support throughout your learning journey. By the end of the course, you’ll be well-prepared for certification exams and possess the practical problem-solving skills that employers value. Take the first step in your Salesforce career today and explore endless opportunities. Enroll for a Free Demo now!
