---
title: "Two-Way Data Binding - LemonadeJS | v4 docs"
description: "LemonadeJS v4 archive. Achieve real-time synchronization between JavaScript and views using LemonadeJS for two-way data binding."
source: https://lemonadejs.com/docs/v4/two-way-data-binding/
---
Two-way Data Binding
====================
**Two-way data binding** is a technique that streamlines a value synchronization between a JavaScript variable reference and its corresponding HTML element value and vice versa.
LemonadeJS offers the special `:bind` attributes for DOM elements to ensure that changes in the `self` property value are reflected in the related HTML element, and alterations in the HTML element value propagate back to the equivalent `self` property.
> **The :bind attribute**
>
> The `:bind` attribute synchronizes the `self` property to a custom component or the HTML DOM element value.
{style="max-width: 500px" class="green"}
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.
### Data Binding On Input Text
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 Data Binding in Custom Elements
The `:bind` directive in LemonadeJS enables two-way data binding for custom elements. It links an attribute of the parent element to the `self.value` of the custom component. Thus, any changes to `self.value` are automatically reflected in the bound parent attribute, ensuring synchronized values.
### 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 [JavaScript Tags](https://jsuites.net/docs/javascript-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)
#### More custom-integrated custom components
- For more about other components, please visit the [javascript plugins](https://jsuites.net/docs) website.
> 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.
[Next chapter: Dealing with arrays and loops](/docs/v4/arrays/){.button .main}