# Two-way Binding

This page explains how `:model` writes form input back into data, and what it does not do.

## Syntax

```html
<div id="app">
  <input type="text" :model="username" />
  <p>Hello, {{ username }}</p>
</div>

<script>
  const app = new QUI({ id: "app", data: { username: "" } });
</script>
```

## Behavior per Element

| Element | Events | Value written to `app.data[key]` |
|---|---|---|
| Text `<input>`, `<textarea>` | `keyup`, `change` | `value`, `""` when empty |
| `<select>` | `change` | The selected option's `value` |
| `<input type="checkbox">`, `<input type="radio">` | `change` | Values of every checked input on the page with the same `name` and `type`, joined with `,` |

`:model` on any other element is ignored.

## Limits

| Limit | Description |
|---|---|
| Writes back only | Input is written to data; changing `app.data.username` in code does not change the field's value |
| Initial value | Add `:value="username"` to prefill the field |
| Top-level keys only | `:model="user.name"` writes a top-level key named `"user.name"`, not `name` on the `user` object |
| Timing | Text input is written on `keyup`; a mouse paste is written only on `change` (blur) |
| Checkbox scope | Computed across every element with that `name` in `document.body`, not just the instance |

For immediate two-way sync, use `@input` from [Event Binding](/event-binding) and write the data yourself.