# Data Binding

You can bind your [data properties](https://cbwire.ortusbooks.com/cbwirev4/the-essentials/properties) to input elements within your [template](https://cbwire.ortusbooks.com/cbwirev4/the-essentials/templates) using [**wire:model**](https://cbwire.ortusbooks.com/cbwirev4/template-directives/wire-model).

{% tabs %}
{% tab title="BoxLang" %}

```javascript
// wires/MyComponent.bx
class extends="cbwire.models.Component" {
    
    // Data properties
    data = {
        "name": ""
    };
}
```

{% endtab %}

{% tab title="CFML" %}

```javascript
// wires/MyComponent.cfc
component extends="cbwire.models.Component" {
    
    // Data properties
    data = {
        "name": ""
    };
}
```

{% endtab %}
{% endtabs %}

```html
<!--- ./wires/MyComponent.bxm|cfm --->
<div>
    <form>
        <input wire:model.live="name" type="text">
        Name updated at #now()#
    </form>
</div>
```

## Resources

{% hint style="success" %}
See the [wire:model](https://cbwire.ortusbooks.com/cbwirev4/template-directives/wire-model) page for complete documentation.
{% endhint %}

{% hint style="info" %}
When [data properties](https://cbwire.ortusbooks.com/cbwirev4/the-essentials/properties) are updated using **wire:model**, CBWIRE has several methods you can hook into such as **onUpdate** and **onHyrdate** ( See [Lifecycle Methods](https://cbwire.ortusbooks.com/cbwirev4/the-essentials/lifecycle-events) ).
{% endhint %}