---
title: "Two-way data binding | LemonadeJS v2"
description: "LemonadeJS v2 archive. Two-way data binding helps to implement a synchronization between a the JavaScript and the view."
source: https://lemonadejs.com/docs/v2/two-way-binding/
---
Two-way binding
===============
Two-way binding is a strategy to simplify the synchronization between a JavaScript reference and the HTML element value and vice versa. That means every change in the `self property` value reflects in the HTML element value, and every change in the HTML element value propagated back to the self.
### The @bind attribute
The `@bind` attribute synchronizes the `self property` to the component or the HTML element value. Thus, the value between the component and the property will always be the same.
Two-way binding examples
------------------------
The following examples show how to bind simple and more complexnative HTML elements, such as multiple dropdowns, checkbox and much more.
### Text input
The @bind creates a transparent event to keep the self property in sync with the value of the input text.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-input-example-cswjt)
### Checkboxes
The checkbox works similarly to the example above. The state of the checkbox and the value of the self property is bound.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-checkbox-example-d5ccj)
### Radio
On a radio HTML element the self attribute should be the same so, that self property holds the same value of the radio.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-radio-example-scdsi)
### Multiple select
The multiple select has a different handler from other HTML elements. That is because a multiple select updates a array that holds the multiple value options.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-select-example-cr7zs)
### ContentEditable
LemonadeJS will track changes and keep the `self property` value in sync with changes in a editable div and vice versa.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-content-example-py8rw)
### Two-way binding in custom elements
The @bind attributed to custom elements will be bound with the attribute self.value insde the component.
#### Basic implementation
In the following example using custom elements.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-custom--element-l2231)
### Integration with custom third-party plugins
The following example shows a Jsuites Tags Plugin integrated with LemonadeJS.
```html
```
The tags plugin component implements val() to integrate with LemonadeJS @bind.
[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-two-way-binding-custom-plugin-9buvt)
Conclusion
----------
You might notice, in the example above, the usage of another of the native lemonade special HTML attribute: `@ready`. That is a method is called when the element is created and appended to the DOM.
### More custom integrated custom components
More about other components that can be integrated with LemonadeJS, visit the Jsuites [javascript plugins](https://jsuites.net/v3) website.
Next chapter: [Dealing with arrays and loops](/docs/v2/arrays/)