How to Reset the input Field on Button Click in LWC

Resetting input field values can be done in two ways inside an LWC either by Resetting the input-field value to Null or to its default value.

If you use an HTML button element within the form to perform an action such as resetting the field values, specify the type=” reset”.

 

Using type=”reset” on a button resets the value to null but it is always preferable to get the default value.

So, in this example, we will see how we can Reset the input-field value to its default value using a button. Let’s start!

lightningInputExample.html

HTML file contains two lightning-input tags that create input for email and mobile. The template includes two lightning-button.

The first button (Next) is used to pass the value to JavaScript Component, whereas the second button (Cancel) is used to reset the input fields.

Code

lightningInputExample.js

Use variables from the LWC controller to get and set the email and Mobile values when a user clicks on the Cancel button.

Code

LightningInputExample.js-meta.xml

This configuration file makes the component available for all Lightning page types

Output:

Component

Adding value

After cancel button

Conclusion:

So, there you have it! With the solution shared here, we hope you can easily reset the input Field on Button Click in LWC. Catch us up with another thoughtful Salesforce development solution coming soon. Till then, Happy learning!!

Our Location worldwide
India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
SR Tower 2nd Floor Hydel Gate Haldwani Uttarakhand 263126 +91-5946359996
USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818