`) is invalid, and so is one in the body (see Where the List Goes). **A default takes the attribute's declared type.** A union attribute takes a literal default directly, and so does a union field inside an object default: ```ehtml Union defaults ``` Grouping template state into one object is the usual way to keep it mutable: a handler can mutate an object's fields and the change is live, while reassigning a plain attribute inside a handler is not (see Reactivity). The object is therefore often the right shape, and each union field in it keeps its type. ## Expressions `{ ... }` is a TypeScript expression. Allowed as element children and attribute values. ```ehtml Expressions

{title}

{label}

{users.length === 0 ? "empty" : `${users.length} users`}

``` For raw HTML output without escaping, use `raw()`: ```ehtml Raw HTML

{raw(post.bodyHtml)}

``` ## Attributes Attribute values follow normal HTML rules. String literals work. Expression blocks work. ```ehtml Attribute values

``` `class` accepts an array. Falsy entries drop. The rest join with spaces. Useful for stringing together static and dynamic classes. ```ehtml Class array

``` `style` accepts an object. ```ehtml Style object

``` Identity shortcut: `` is ``. Spread: ``. ## Form Bindings `value`, `checked`, and `group` create two-way bindings. Works on ``, `

`, `<select>`, and `contenteditable` elements. `group` is the
exception: it binds a set of checkbox or radio inputs to one variable, and does
not apply to `<select>`, which binds with `value`.

```ehtml Form bindings
<input value={form.name}>
<input type="checkbox" checked={form.subscribed}>
<input type="number" value={form.age}>
<textarea value={form.bio}/>

<label><input type="checkbox" group={form.contacts} value="email"> email</label>
<label><input type="checkbox" group={form.contacts} value="phone"> phone</label>

<div contenteditable value={form.bio}/>
```

**contenteditable must use `value=`, not text content.**
`<div contenteditable>{body}</div>` renders once and stays static.
`<div contenteditable value={body}>` is reactive.

**Read and write data, not the DOM.** Calling `el.value = "..."` or otherwise
mutating a bound input fights the runtime.

### File Inputs

`<input type="file">` uses the same `value=` binding, typed as `File[]`. When
the user picks files, the runtime reads their bytes and assigns the bound
variable. The binding runs from picker to variable, because browsers do not let script
set a file input's files. Assign `[]` to clear the input.

```ts services.ts
import { File } from "@elements/app";

/** @rpc */
function upload(files: File[]) {
  for (const f of files) {
    sql`
      insert into uploads (
        name,
        content_type,
        data
      ) values (
        ${f.name},
        ${f.contentType},
        ${f.data}
      )
    `;
  }
}
```

```ehtml template.ehtml
<html (
  private files: File[] = [],
)>
  <form onsubmit={() => upload(files)}>
    <input type="file" multiple value={files}>
    <button type="submit">upload</button>
  </form>
</html>
```

`File.read()` is asynchronous (the browser has to read bytes off disk). The
form's submit handler **automatically awaits any in-flight reads** before
running, so the `files` array is always populated by the time `upload(files)` is
called. No state machine needed for the simple case.

`File` is a wire-format class (`name`, `size`, `contentType`,
`data: Uint8Array`, `lastModified`) that serializes across `@rpc`. The `data`
field maps directly to a Postgres `bytea` column.

**Progress / preview UI: use an explicit handler.**
When you need the file bytes available before submit (e.g. to show a thumbnail
or a "reading…" spinner), use `File.read()` directly inside an `onchange`
handler. The sync-style transform makes the state machine read top-to-bottom:

```ehtml Upload with progress
interface Upload {
  files: File[];
  state: "idle" | "reading" | "ready" | "uploading" | "done";
}

function onChange(e: Event, form: Upload) {
  form.state = "reading";
  form.files = File.read(e.target as HTMLInputElement);
  form.state = "ready";
}

function onSubmit(form: Upload) {
  form.state = "uploading";
  upload(form.files);
  form.state = "done";
}

<html (
  private form: Upload = {
    files: [],
    state: "idle",
  },
)>
  <form onsubmit={() => onSubmit(form)}>
    <input type="file" multiple onchange={(e) => onChange(e, form)}>

<span e:if={form.state === "reading"}>reading…</span>

<ul e:if={form.state === "ready" || form.state === "uploading"}>
      <li e:for={f of form.files}>{f.name} ({f.size} bytes)</li>
    </ul>

<button type="submit"
            disabled={form.state === "reading" || form.state === "uploading"}>upload</button>
  </form>
</html>
```

The state and the files are one object so the handlers can write to them: a
handler mutates `form.state`, while reassigning a bare `state` attribute from
inside a function updates nothing (see Reactivity).

The two patterns interop with the same `File.read()` primitive: the `value=`
binding just calls it for you on `change`.

{greeting}

{title}