Problem - I am not able to reset the lightning-input to its default value.

What I want - I am providing the default value to lightning-input through my javascript file. I change the values of lightning-input on UI but then if I want my form back in the state as it was before, so I click "Reset" button which causes a javascript method to execute in which I reset my input fields using reset() method, but it doesn't work [ It does not set my lightning-input to their default values i.e. "Initial" and "0"].

Code -

In .html

        <lightning-input type="text" 
                         label="Enter some text" 
        <lightning-input type="number" 
                         label="Enter some number" 
        <lightning-button label="Reset" onclick={handleReset}></lightning-button>

In .js

import { LightningElement, track } from 'lwc';

export default class Test extends LightningElement {
    @track textValue = "Initial";
    @track numValue = 0;

    changeTextValue(event) {
        this.textValue = event.target.value;

    changeNumValue(event) {
        this.numValue = event.target.value;

    handleReset() {
        const inputFields = this.template.querySelectorAll(
        if (inputFields) {
            inputFields.forEach(field => {
  • It does not work means the values in lightning input does not clear to null - but it would not since the changes done by handlereset is not directly changing the binded variable to push changes to dom. Use following please this.template.querySelectorAll('lightning-input').forEach(each => { each.value = ''; }); That should work.
    – Mitesh
    Jan 26, 2020 at 12:47
  • Have a look here [developer.salesforce.com/docs/component-library/tools/…
    – Mitesh
    Jan 26, 2020 at 12:54

1 Answer 1


With a form, you can clear all values with:

handleReest() {

This will invoke the standard "HTML Form Reset" function. Note that the values won't go to the "default", just blank values. If you want to reset back to the initial values, you'd have to write the code again:

handleReset() {
    this.textValue = 'Initial';
    this.numValue = 0;
  • 2
    Thanks, you are correct but I also want to know that the "reset" function sets the default value for "lightning-input-field" used in "lightning-record-edit-form" but why not for "lightning-input".
    – Avi Rai
    Jan 26, 2020 at 14:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .