---
title: "Reactive HTML forms | LemonadeJS v1"
description: "LemonadeJS v1 archive. A simple example of a reactive HTML form using LemonadeJS."
source: https://lemonadejs.com/docs/v1/examples/html-elements/
---

Two way binding
===============

Overview
--------

Lemonadejs brings two-way binding natively. Each change in the property of a `self` would be applied to the correspondend elements in the view.

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@1/dist/lemonade.js"></script>

<div id='root'></div>

<script>
var myComponent = (function() {
    var self = {};
    self.name = 'Roger Rabbit';
    self.valid = true;

    var template = `<div>
        <div>Name: {{self.name}}</div>
        <div>Checked: {{self.valid}}</div><br/>
        <label>
            <input type="text" value="1" @bind="self.name" />
        </label>
        <label>
            <input type="checkbox" value="1" @bind="self.valid" />
            Test
        </label>
    </div>`;

    return lemonade.element(template, self);
});

lemonade.render(myComponent, document.getElementById('root'));
</script>
</html>
```