Input Timing

Sercrod form controls are commonly connected to data with *input. The important question is not only where the value is written, but when the surrounding template should react to that value.

This page covers normal *input, *lazy, and *eager.

Normal *input

Normal *input binds a form control to a writable data path. When the user edits the control, Sercrod writes the new value back to that path.

<serc-rod data='{"name":"Alice"}'>
    <p>
        <label>
            Name:
            <input type="text" *input="name">
        </label>
    </p>

    <p>
        Preview:
        <strong *print="name"></strong>
    </p>
</serc-rod>

Use normal *input when it is acceptable for the surrounding template to update through the normal input update path. This is useful when other parts of the template should reflect the edited value after the edit is committed.

Why *lazy Exists

Some interfaces care more about the next user action than immediate parent template refresh.

In a message form, the user usually types into a field and then clicks a button or moves focus to another field. If the parent template refreshes at the wrong time, that next focus move or click can feel unnatural.

*lazy exists for that situation.

<input type="text" *input="message" *lazy>

The input value is still written to the bound data path, but the edit does not force the parent template to refresh immediately because of each edit.

*lazy does not mean the input value is ignored. It also does not mean the value is updated only after blur. The main point is whether the parent template refreshes immediately as a result of the input edit.

Example: Message Input

<serc-rod
    data='{"name":"", "text":""}'
    *websocket="'wss://ws.sercrod.com:8443/'"
    *into="ws_data"
>
    <p>
        <label>
            Your name:
            <input type="text" *input="name" *lazy>
        </label>
    </p>

    <p>
        <label>
            Message:
            <input type="text" *input="text" *lazy>
        </label>
    </p>

    <p>
        <button
            *if="$ws_ready"
            *ws-send="(name || 'anonymous') + ': ' + text"
            @click="text = ''"
        >Send</button>
        <span *else>Waiting for connection...</span>
    </p>

    <h3>Last message from server</h3>
    <pre>%$ws_last%</pre>
</serc-rod>

Here *lazy is used on the text inputs. The user can type a message and then move focus or click Send naturally. The input values are still available to *ws-send and @click.

*eager

Use *eager when the interface should react immediately while the user types, such as live search, filtering, or live preview.

<serc-rod data='{"keyword":""}'>
    <input type="text" *input="keyword" *eager>
    <p>Searching for: <strong *print="keyword"></strong></p>
</serc-rod>

Choosing A Mode

<!-- Normal input: other elements may update through the normal input update path -->
<input type="text" *input="name">

<!-- Lazy input: keep the next focus move or click natural -->
<input type="text" *input="message" *lazy>

<!-- Eager input: update the interface immediately while typing -->
<input type="text" *input="keyword" *eager>

Use normal *input when the normal commit and update flow is enough.

Use *lazy when:

• the user is expected to type and then click another control
• immediate parent refresh may interfere with focus movement or the next click
• the input belongs to a message form, compact action form, WebSocket send flow, or API submit flow
• the typed value should be kept in data, but the surrounding layout does not need to react immediately

Use *eager when:

• the UI should update live while the user types
• the control drives live search, live filtering, counters, validation messages, or preview output

Do not use *lazy for live search, live filtering, or live previews that must change on every input.