Handle Input Changes in Lightning Web Components

Let us discuss here how to detect the input field value changes in lightning web components.T o listen for changes from an element in your template that accepts input, such as a text field. use the onchange or onkeypress event with an @track property.

Create a new Lightning Web component using the below SFDX command. In this example first, we are using the HTML input tag

Use the below inputchangeex.html code

Use the below inputchangeex.js code

Use the below inputchange.js-meta.xml


Push the changes using the below SFDX command


Add this component to the record page and you can able to see the output like below.



Let’s define the same code to use lightning-input . A lightning-input component creates an HTML input element.

Update the Html code as shown below and push the changes

You can able to see the input keypress changes