> For the complete documentation index, see [llms.txt](https://bemtv.gitbook.io/bemtvjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bemtv.gitbook.io/bemtvjs/bindings.md).

# Bindings

Sometimes we need to get the value of a property or attribute from a DOM element and save it in a variable.

To do this, we can simply declaratively bind a `compVar` to an attribute or property of the element using the `<` symbol:

```javascript
import { _ } from "bemtv";

const { onMount, $, template, render } = _`App`({
  divEl: undefined,
});

onMount(() => {
  console.log($.divEl)
});

template`div[ $divEl<this ]`;

render();
```

Note the `$divEl<this`, we are ordering Bemtv to set the DOM element as the value of the `divEl` property.

If we wanted an element instance as in  `useElManager()` we could do:

<pre class="language-javascript"><code class="lang-javascript"><strong>import { _ } from "bemtv";
</strong>
const { onMount, $, template, render } = _`App`({
  divEl: undefined,
});

onMount(() => {
  console.log($.divEl)
});

template`div[ $divEl&#x3C;inst ]`;

render();
</code></pre>

### Numeric inputs

To get the current value of `inputs` we can use the `value` property and if we want this value to be converted to `number` automatically we must define the initial value of the property that will keep the value as a number:

```javascript
import { _ } from "bemtv";

const {$, template, render } = _`App`({
  inputValue: 0,
});

template`input[ $inputValue<value type="number"]`;

render();
```

### Select element

Binding with the `select` element is similar to `inputs`, however, if you use the`multiple` attribute you must define an array for the property that will bind with the `select` value:

```javascript
import { _ }from "bemtv";

const { onMount, $, template, render } = _`App`({
  options: [],
});

template`
    select[
        $options<value

        multiple="true" ~

        option[value="1" ~ First]
        option[value="2" ~ Second]
        option[value="3" ~ Third]]`;

render();
```

### Checkbox inputs

Similar to `select`, `checkbox inputs` can define an array for the property that will be bound to the list of `checked` items:

```javascript
import { _ }from "bemtv";

const { $, template, render } = _`App`({
  options: [],
});

template`
      input[ $inputs<checked type="checkbox" name='test' value="1"]
      input[ type="checkbox" name='test' value="2"]
      input[ type="checkbox" name='test' value="3"]`;

render();
```