---
title: "Two-Way Data Binding with LemonadeJS | v3 docs"
description: "LemonadeJS v3 archive. Achieve real-time synchronization between JavaScript and views using LemonadeJS's efficient two-way data binding."
source: https://lemonadejs.com/docs/v3/two-way-binding/
---
Two-way data binding
====================
Two-way data binding is a technique that streamlines synchronization between a JavaScript reference and its corresponding HTML element value and vice versa. This approach ensures that changes in the `self` property value are reflected in the HTML element, and alterations in the HTML element value propagate back to the `self`.
> **The :bind attribute**
>
> The `:bind` attribute synchronizes the `self` property to the component or the HTML element value.
Two-way data binding examples
-----------------------------
The following examples show how to bind simple and more complex native HTML elements, such as multiple dropdowns and checkboxes.
### 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/two-way-data-binding-example-jq5doq)
### 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/two-way-data-binding-with-checkboxes-wefr6u)
### Radio
On a radio HTML element, the self attribute should be the same so that `self` property holds the exact value of the radio.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/two-way-data-binding-with-radio-3r0tno)
### Multiple select
The multiple select has a different handler from other HTML elements. That is because multiple select updates an array that holds the various values.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/two-way-data-binding-with-dropdown-hw73t2)
### ContentEditable
LemonadeJS will track changes and keep the `self` property value in sync with changes in an editable div and vice versa.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/two-way-data-binding-with-content-editable-div-7nryuj)
### Two-way binding in custom elements
The :bind attributed to custom elements binds with the component `self` attribute value.
#### Basic implementation
The following example shows an implementation of :bind in custom elements.
```html
```
[See this example on codesandbox](https://codesandbox.io/s/two-way-data-binding-hpum0y)
### 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/two-way-data-binding-integration-286wtt)
> Conclusion
> ----------
>
> In the example above, you might notice the usage of another of the native lemonade special HTML attribute: `:ready`. That method call happens when the element is created and appended to the DOM.
### More custom-integrated custom components
- For more about other components, please visit the [javascript plugins](https://jsuites.net/v4) website.
[Next chapter: Dealing with arrays and loops](/docs/v3/arrays/){.button .main}