---
url: https://lune-js.com/directives/lu-model.md
---
# lu-model

`lu-model` is used to create a two-way data binding on form input elements. It automatically picks the right way to update the element based on the input type.

## Basic Usage: Text Inputs

For `<input type="text">`, `<textarea>`, and `<input type="email">`, `lu-model` binds to the `value` property and listens for the `input` event.

```html
<div lu-scope="{ message: '' }">
  <input lu-model="message" placeholder="Type something..." />
  <p>Message is: {{ message }}</p>

  <textarea lu-model="message" placeholder="Type more..."></textarea>
</div>
```

## Checkboxes

### Single Checkbox

Binds to the `checked` property and uses a boolean value.

```html
<div lu-scope="{ checked: true }">
  <input type="checkbox" id="checkbox" lu-model="checked" />
  <label for="checkbox">Checked: {{ checked }}</label>
</div>
```

### Multiple Checkboxes

Binds to the same array. Items are added/removed from the array based on the `value` attribute of the checkbox.

```html
<div lu-scope="{ selectedItems: [] }">
  <input type="checkbox" value="Apple" lu-model="selectedItems" />
  <input type="checkbox" value="Banana" lu-model="selectedItems" />
  <input type="checkbox" value="Cherry" lu-model="selectedItems" />

  <p>Selected: {{ selectedItems }}</p>
</div>
```

## Radio Buttons

Binds to the same property. The value will be set to the `value` attribute of the selected radio button.

```html
<div lu-scope="{ picked: '' }">
  <input type="radio" value="One" lu-model="picked" />
  <input type="radio" value="Two" lu-model="picked" />

  <p>Picked: {{ picked }}</p>
</div>
```

## Select Menus

### Single Select

Binds to the selected option's value.

```html
<div lu-scope="{ selected: '' }">
  <select lu-model="selected">
    <option disabled value="">Select one</option>
    <option>A</option>
    <option>B</option>
  </select>
  <p>Selected: {{ selected }}</p>
</div>
```

### Multiple Select

Binds to an array of selected option values.

```html
<div lu-scope="{ selected: [] }">
  <select lu-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <p>Selected: {{ selected }}</p>
</div>
```

## Modifiers

### `.lazy`

By default, `lu-model` syncs the input on every `input` event. Use `.lazy` to sync after `change` events instead.

```html
<input lu-model.lazy="msg" />
```

### `.number`

Automatically cast the input value to a number. This is especially useful for `type="number"` or `type="range"`.

```html
<input lu-model.number="age" type="number" />
```

### `.trim`

Automatically trim any whitespace from the beginning and end of the input value.

```html
<input lu-model.trim="msg" />
```

## Dynamic Binding and Custom Values

You can bind the value of checkboxes or radio buttons to dynamic values using `lu-bind`.

```html
<div lu-scope="{ picked: '', first: 'A', second: 'B' }">
  <input type="radio" lu-model="picked" :value="first" />
  <input type="radio" lu-model="picked" :value="second" />
</div>
```

### True/False Value for Checkboxes

For checkboxes, you can customize the values used for checked and unchecked states using `:true-value` and `:false-value` bindings.

```html
<input type="checkbox" lu-model="toggle" :true-value="'yes'" :false-value="'no'" />
```

> \[!NOTE]
> You must use the `:true-value` and `:false-value` binding syntax (with the `:` prefix), not plain HTML attributes.