> ## Documentation Index
> Fetch the complete documentation index at: https://aerojs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Reactive bindings
> Wire DOM to
{ count }
```
For binding text on a void or self-contained element, use the `text` attribute:
```html theme={"theme":"github-dark-default"}
```
## Event handlers
Use `on:` with an expression body. Modifiers use dot syntax (same idea as Vue):
```html theme={"theme":"github-dark-default"}
```
Event expressions run with state bindings in scope. Assignments like `open = !open` update signals directly.
## Visibility (`show`)
Toggle presence without removing the node from the tree (display toggling):
```html theme={"theme":"github-dark-default"}
Visible when open is true
```
## HTML (`html`)
Set `innerHTML` from a state expression. Use only with trusted content:
```html theme={"theme":"github-dark-default"}
```
## Class toggles (`class:`)
Bind a boolean to a class name:
```html theme={"theme":"github-dark-default"}
```
## Attribute bindings (default)
With `
Dashboard
```
Boolean flag bindings (`data-*` or any hyphenated name like `is-even`) use presence-only semantics: `true` adds the attribute; `false` removes it. String `data-*` values (like `data-theme`) are emitted as strings. `aria-*` booleans emit `"true"` / `"false"`. Non-hyphenated attrs (like `href`) stringify booleans.
## Property bindings (IDL exceptions)
Bind IDL properties that do not round-trip through content attributes (`disabled`, `readOnly`, `tabIndex`, `hidden`, `indeterminate`):
```html theme={"theme":"github-dark-default"}
```
## Form model bindings
Two-way bindings for common form controls:
| Control | Attribute | Example |
| ---------------------------- | --------- | ------------------------------------------------------ |
| Text input, textarea, select | `value` | `value="{ email }"` |
| Checkbox | `checked` | `checked="{ agree }"` |
| Radio group | `checked` | `checked="{ plan }"` (value from `value` on the input) |
```html theme={"theme":"github-dark-default"}
```
### Nested object fields
Group related form fields in one object binding. Member access in bindings and handlers mutates in place:
```html theme={"theme":"github-dark-default"}
```
`value="{ formModel.email }"` and `checked="{ formModel.agree }"` stay in sync when the user types or when code assigns `formModel.email = '…'`. The runtime skips DOM writes when the control already matches state so the caret stays put during typing.
Reactive form-model and property binds also **mirror native content attributes** in SSR output and at runtime, so `[checked]`, `[value]`, `[disabled]`, and similar attribute selectors keep working. Mount markers (`data-aero-model-*`, `data-aero-property-*`) remain in the HTML for binding wiring.
## Loading state (`busy`)
When **both** `reactivity: true` and `hypermedia: true` are enabled, `busy` ties a boolean state binding to hypermedia request lifecycle on an element:
```html theme={"theme":"github-dark-default"}
```
`busy` requires a declared boolean `let` binding. Hypermedia sets the signal while the request runs and restores it when the swap settles.
See [Hypermedia recipes](/guide/hypermedia) for action options.
## Side effects (`$effect`)
When declarative binds are not enough — web component `.update()`, imperative DOM, or third-party subscriptions — use top-level `$effect(() => { … })` in `