Reusable Dynamic Lightning Input with Field Level Security

lightning-input component creates an HTML input element. When working with forms that interact with Salesforce records, lightning-input does not works as lightning-input-field with works with lightning-record-formlightning-record-view-form, and lightning-record-edit-form components. lightning input field supports the field level security along with many other features like population the fields based on field type dynamically whereas lightning input does not. We are going to add the Field Level Security in Lightning Input component using getObjectInfo wire adaptor that gives us field level metadata on a particular object.


  1. lightning-input does not support several field type like picklist, text area etc.
  2. It does not support pre-populating the field values when you load the component in record context.

Dynamic Lightning Input extended Component

We are going to build a custom Lightning Web Component with input which can be called from any other Lightning Web component. by passing the field API name and object API name.


We are making use of standard lightning-input component and rendering it based on user has edit permission for passed field api name into js file. You can modify it based on your requirement. Additionally, it shows you the help text, label, field type and required attribute from field metadata.

    <lightning-input if:true={fieldInfo.updateable} type={fieldInfo.dataType} 
          label={fieldInfo.label} required={fieldInfo.required} 
          field-level-help={fieldInfo.inlineHelpText} onchange={handleChange}>


getObjectInfo wire adapter gives you metadata about a specific object. The response includes metadata describing the object’s fields, child relationships, record type, and theme. We are fetching passed field API name related metadata from response received by calling getObjectInfo wire adaptor.

We are also firing change event to pass the field entered value. You can extend the same for other events like blur and focus.

fieldInfo getter stores the field metadata and referred in html file to pass the value to standard lightning input component.

import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class Input extends LightningElement {
    @api objectApiName;
    @api fieldName;

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })

    dataTypeMapping = {
        String: 'text',
        Currency: 'number',
        Double: 'number',
        DateTime: 'datetime',
        Phone: 'phone',
        Boolean: 'checkbox',
        Url: 'url',
        Date: 'date',
        Int: 'number'

    get fieldInfo() {
        if (this.objectInfo && && {
            let field =[this.fieldName];
            field = JSON.parse(JSON.stringify(field));
            field.dataType = this.dataTypeMapping[field.dataType];
            return field;
        return {};

    handleChange(event) {
        let value;
        if ( === 'checkbox' || === 'checkbox-button' || === 'toggle') {
            value =;
        } else {
            value =;
        this.dispatchEvent(new CustomEvent('change', { detail: value }));


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

Now, We will call this component in another component to understand how to use this reusable dynamic input field which respect the field level security of a user.

Let’s create another component with name inputCaller .


The reusable dynamic lightning input extended component can be called from any other component by just passing field and object api name.

    <lightning-card title="Dynamic HTML Input With Field Level Security" icon-name="custom:custom63">
        <div class="slds-var-m-around_medium">
            <p class="slds-var-m-bottom_small">
                <c-input object-api-name="Account" field-name="NumberOfEmployees" onchange={handleChange}></c-input>
                Entered Value is: {fieldValueFromInput}


handleChange will be fired whenever user type something in input field. fieldValueFromInput stores the field value.

import { LightningElement } from 'lwc';

export default class InputCaller extends LightningElement {
    fieldValueFromInput; //property to hold the entered field value
    //Assigning the payload to private property
    handleChange(event) {
        this.fieldValueFromInput = event.detail.value;


We can test the component by adding it on any lightning page. XML file defines the metadata of the component like where it can be used in Salesforce.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">


Leave a Reply