Controlled inputs

Set an input's value from JavaScript and copy the typed value back in onchange. LWC has no framework two-way binding.

You set the value

The template passes value={name} into the input. The input shows that string. It does not store a second copy that the framework syncs for you.

When the person types, handle onchange and assign the new text onto the field. Until that assignment, name stays at the previous value.

Where the text lives

lightning-input puts the text on event.detail.value. A plain <input> puts it on event.target.value. Read the one that matches the element you used.

The same shape works for a checkbox or a picklist: the field in JavaScript is what the template renders, and the handler copies the control's new value onto that field.

Why there is no two-way binding

LWC does not offer a framework two-way binding directive. One-way data plus an event keeps the update visible in your code, which is the place you debug.

Example

javascript

import { LightningElement } from 'lwc';

export default class NameField extends LightningElement {
  name = '';

  handleChange(event) {
    this.name = event.detail.value;
  }
}