*lazy

Why *lazy exists

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

For many interfaces, this is useful because other parts of the template can react to the changed value. For example, a preview, counter, filter, or search result may update after the input value changes.

However, there are also cases where the next user action matters more than immediate 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. It keeps the input update local, while still keeping the data path available for later actions.

What *lazy does

*lazy is used together with *input. The input value is still written to the bound data path, but the edit does not force the parent template to refresh immediately.

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

In this example, the input can still update message. The important difference is that the surrounding parent template is not refreshed immediately because of each edit.

What *lazy does not mean

*lazy does not mean that the input value is ignored. It also does not mean that the value is updated only after blur.

The value remains useful for later actions, such as a button click. The main point is not whether the value exists, but whether the parent template is refreshed immediately as a result of the input edit.

Example: message input with *lazy

A WebSocket message form is a good example. The user types a name or message, then moves focus or clicks Send. The important behavior is that typing should not interrupt the next action.

<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.

This is the same reason the WebSocket playground uses *lazy on its text inputs.

Without *lazy

Without *lazy, a normal *input update can refresh the parent template. In that case, other elements that read the same data can update when the input edit is committed.

The following example does not use *lazy or *eager. After editing the input and moving focus out of it, the displayed value can update through the normal template refresh 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>

In this example, the input and the preview both use name. The input writes to name, and the *print element reads from name.

When the normal input update leads to a parent template refresh, the preview can change immediately after the edit is committed, such as after focus leaves the input.

Choosing normal input, *lazy, or *eager

The right choice depends on what should happen after the input value changes.

<!-- 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>

When to use *lazy

• Use it on text inputs where the user is expected to type and then click another control.
• Use it when an immediate parent template refresh may interfere with focus movement or the next click.
• Use it for message inputs, compact action forms, and similar UI flows.
• Use it when the typed value should be kept in data, but the surrounding layout does not need to react immediately.

When not to use *lazy

• Do not use it when the UI should update live while the user types.
• Do not use it for live search or live filtering.
• Do not use it for live previews that must change on every input.
• Use *eager or the normal input update behavior instead.

Summary

*lazy keeps input edits local. The value is still written to the data path declared by *input, but the parent template is not refreshed immediately because of each edit.

Use *lazy when the next focus move or click should feel natural. Use *eager when the surrounding UI should react immediately while the user types.