I have a simple component that creates a record using lightning-record-edit-form. After the record is created, I want to clear the values of the lightning-input-field components. I have tried a few different ways, and none seem to work. The same code applied to a lightning-input does work.

example template

    <lightning-card title="bug sample">
        <lightning-record-edit-form id="form" object-api-name="Account" onsubmit={handleSubmit} onsuccess={handleSuccess}>
            <lightning-input-field value={name} field-name="Name"></lightning-input-field>
            <lightning-input value={name}></lightning-input>
            <lightning-button type="submit" label="Save" class="slds-m-top_medium">

example .js

import {
} from 'lwc';

export default class ToDoApp extends LightningElement {
    @track name;

    handleSubmit(event) {
        const fields = event.detail.fields;

    handleSuccess() {
        // attempt 1
        this.name = '';
        // attempt 2
        this.template.querySelectorAll('lightning-input-field').forEach(each => {
            each.value = '';

on success, the lightning-input clears, but the lightning-input-field remains unchanged.

Any ideas?

5 Answers 5


This is working as designed. You can modify lightning-input-fields programmatically by changing whatever is specified on their value attribute and it will work...except (here comes the catch)...

Once the user provides any input whatsoever, you cannot programmatically change a lightning-input-field. This is documented in the docs for lightning-input-field:

If a user enters anything in an input field, you can no longer programmatically set the value of the field. The assumption is that there are unsaved changes that should not be overwritten. If you want to be able to overwrite user changes, you can use lightning-input instead.

This special behavior for lightning-input-field conflicts with how properties on all other child components are handled, which makes it very unintuitive. From the LWC docs for Set Properties on Child Components: "The data binding for property values is one-way. If the property value changes in the owner component, the updated value propagates to the child component."

Vote for the idea Remove restriction on programmatically setting lightning-input-fields.

  • Thanks for the clarification. I voted for your idea. This is unfortunate and unintuitive. Apr 18, 2019 at 7:19

Have one "not so bad solution". You should wrap all 'lightning-input-field' in <template if:true={renderInputs}></template>

On init your '@track renderInputs = true';

When you need to clear value you will do next:

inputClear() {
    this.renderInputs = false;
    setTimeout(() => {this.renderInputs = true}, 0);

This will couse rerender of lightning-input-field. This will not be work without setTimeout(). Or you can use setInterval - any asynch function.

  • 1
    Thank you! This simple hack works! I'll just add that you need to add // eslint-disable-next-line @lwc/lwc/no-async-operation if you want to shut up lint
    – muchavie
    Jan 8, 2020 at 0:39
  • this asynch hack trick is really awesome and it saved my ass! How do you know this feature? Is there any document to notice that? I'm really curious...
    – Lanjinest
    Mar 4, 2021 at 9:22
  • @Lanjinest it's just how it works :) By this action, you removing input from DOM and render it back with a new value, that's it Mar 5, 2021 at 15:43

I think lightning-record-edit-form is too bound to the record to allow you to modify the fields without modifying the record itself.

In order to get the level of flexibility you're looking for, you may need to to move away from that component & create the record manually using createRecord. This will allow you to manipulate the fields all you like, but it will mean you'll need to handle errors more explicitly.

For greater context, here's an article from the documentation that compares the different components for creating & updating records.


A lightning-record-edit-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record. The lightning-input-field component is used inside the lightning-record-edit-form to create editable fields.

So for clear values on input field, you may clear or delete value of the record-id attribute on lightning-record-edit-form markup


You can work around this by using an onchange method and overwrite your "value" programmatically every time. This allows you to reapply values through JS even when the users changed the value manually because the component thinks that it was not changed by the user/UI but by the code.

e.g. in this example I store my values in an object, but could also be seperate variables.


<lightning-input-field field-name="Subject__c"

<lightning-input-field field-name="Comment_Description__c"


handleSubjectChange(event) {
    this.caseComment.Subject__c = event.target.value;

handleCommentDescriptionChange(event) {
    this.caseComment.Comment_Description__c = event.target.value;

You must log in to answer this question.

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