How to get field value of lightning-input in Lightning Web Component using onchange event?

lightning-input component is widely used in lightning web components. As a Salesforce Lightning developer, we are more interested in knowing how to get the entered field value of lightning-input using onchange event. This component supports HTML5 input types, including checkbox, date, datetime, time, email, file, password, search, tel, url, number, radio, toggle. The default is text.

Let’s create a Lightning web component where all types of lightning-input will be used and will have onchange handlers defined to fetch the value dynamically and store the same in property defined.

Let’s see a sample markup for lightning-input of type number:-

<lightning-input type="number" onchange={handleNumberChange} label="Enter a number"></lightning-input>

It has a standard event named onchange event which gets fired whenever field value changes. event.target.value returns the field value of lightning-input dynamically.

handleNumberChange(event){
   this.numberFieldValue = event.target.value;
}

Let’s see an another example to see how you can get onchange value dynamically in lightning-input component.

<lightning-input type="checkbox" onchange={handleCheckBoxChange} label="Basic option"></lightning-input>

It has a onchnage handler defined in the js file of the component. When this method gets fired , event.target.checked returns the field value dynamically.

handleCheckBoxChange(event){
   this.checkBoxFieldValue = event.target.checked;
}

Check the full code here. The html file has below code:-

<template>
    <lightning-card title="Date Field">
        <lightning-input type="date" onchange={handleDateChange} label="Enter a date"></lightning-input>
        <p slot="footer">Date Field Value is:- {dateFieldValue}</p>
    </lightning-card>
    <lightning-card title="Date Time Field">
        <lightning-input type="datetime" onchange={handleDateTimeChange}  label="Enter a date/time value"></lightning-input>
        <p slot="footer">Date Time Field value is:- {dateTimeFieldValue}</p>
    </lightning-card>
    <lightning-card title="Time Field">
        <lightning-input type="time" onchange={handleTimeChange} label="Enter a time"></lightning-input>
        <p slot="footer">Time Field value is:- {timeFieldValue}</p>
    </lightning-card>
    <lightning-card title="Color Field">
        <lightning-input type="color" onchange={handleColorChange} label="Favorite color"></lightning-input>
        <p slot="footer">Color value is:- {colorFieldValue}</p>
    </lightning-card>
    <lightning-card title="File Upload Field">
        <lightning-input type="file" onchange={handleFileChange} label="Attachment"></lightning-input>
        <p slot="footer">File Name is:- {fileUploadValue}</p>
    </lightning-card>
    <lightning-card title="Text Field">
        <lightning-input type="text" onchange={handleTextChange} label="Enter some text"></lightning-input>
        <p slot="footer">Text Field Value is:- {textFieldValue}</p>
    </lightning-card>
    <lightning-card title="Email Field">
        <lightning-input type="email" onchange={handleEmailChange} label="E-mail address"></lightning-input>
        <p slot="footer">Email Field Value is:- {emailFieldValue}</p>
    </lightning-card>
    <lightning-card title="password Field">
        <lightning-input type="password" onchange={handlePasswordChange} label="Enter your password"></lightning-input>
        <p slot="footer">Password Field Value is:- {passwordFieldValue}</p>
    </lightning-card>
    <lightning-card title="Phone Field">
        <lightning-input type="tel" onchange={handlePhoneChange} label="phone field">
        </lightning-input>
        <p slot="footer">Phone Field Value is:- {phoneFieldValue}</p>
    </lightning-card>
    <lightning-card title="URL Field">
        <lightning-input type="url" onchange={handleUrlChange} label="Enter a URL"></lightning-input>
        <p slot="footer">Url Field Value is:- {urlFieldValue}</p>
    </lightning-card>
    <lightning-card title="Numnber Field">
        <lightning-input type="number" onchange={handleNumberChange} label="Enter a number"></lightning-input>
        <p slot="footer">Number Field Value is:- {numberFieldValue}</p>
    </lightning-card>
    <lightning-card title="checkbox Field">
        <lightning-input type="checkbox" onchange={handleCheckBoxChange} label="Basic option"></lightning-input>
        <p slot="footer">Check Box Field Value is:- {checkBoxFieldValue}</p>
    </lightning-card>
    <lightning-card title="Checkbox Button Field">
        <lightning-input type="checkbox-button" onchange={handleCheckBoxButtonChange} label="Input One"></lightning-input>
        <p slot="footer">Check Box Button Field Value is:- {checkBoxButtonFieldValue}</p>
    </lightning-card>
    <lightning-card title="Toggle Field">
        <lightning-input type="toggle" onchange={handleToggleChange} label="Basic option"></lightning-input>
        <p slot="footer">Toggle Field Value is:- {toogleFieldValue}</p>
    </lightning-card>
    <lightning-card title="Search Field">
        <lightning-input onchange={handleSearchChange} label="Search when user hits the 'enter' key" type="search">
        </lightning-input>
        <p slot="footer">Toggle Field Value is:- {searchFieldValue}</p>
    </lightning-card>
</template>

And the js file of the component has all the change handlers defined in the html markup:-

import { LightningElement } from 'lwc';

export default class InputText extends LightningElement {
    dateFieldValue;
    dateTimeFieldValue;
    timeFieldValue;
    colorFieldValue;
    fileUploadValue;
    textFieldValue;
    emailFieldValue;
    passwordFieldValue;
    phoneFieldValue;
    urlFieldValue;
    numberFieldValue;
    checkBoxFieldValue;
    checkBoxButtonFieldValue;
    toogleFieldValue;
    searchFieldValue;
    handleDateChange(event){
        this.dateFieldValue = event.target.value;
    }
    handleDateTimeChange(event){
        this.dateTimeFieldValue = event.target.value;
    }
    handleTimeChange(event){
        this.timeFieldValue = event.target.value;
    }
    handleColorChange(event){
        this.colorFieldValue = event.target.value;
    }
    handleFileChange(event){
        this.fileUploadValue = event.target.value;
    }
    handleTextChange(event){
        this.textFieldValue = event.target.value;
    }
    handleEmailChange(event){
        this.emailFieldValue = event.target.value;
    }
    handlePasswordChange(event){
        this.passwordFieldValue = event.target.value;
    }
    handlePhoneChange(event){
        this.phoneFieldValue = event.target.value;
    }
    handleUrlChange(event){
        this.urlFieldValue = event.target.value;
    }
    handleNumberChange(event){
        this.numberFieldValue = event.target.value;
    }
    handleCheckBoxChange(event){
        this.checkBoxFieldValue = event.target.checked;
    }
    handleCheckBoxButtonChange(event){
        this.checkBoxButtonFieldValue = event.target.checked;
    }
    handleToggleChange(event){
        this.toogleFieldValue = event.target.checked;
    }
    handleSearchChange(event){
        this.searchFieldValue = event.target.value;
    }
}

Demo – Getting field value of lightning-input in Lightning Web Component

Check this playground to see how it works. Playground lets you write JavaScript, HTML, and CSS code, and preview the output in the interactive code editor.

Check out some more cool stuff on Lightning Web Component here:- https://salesforcediaries.com/category/lightning-web-component/