wire:model

wire:model binds an input to a public component property. A plain binding keeps the browser-side value until the next action or submit request:

<div>
    <label for="display-name"><?= $escaper->escapeHtml(__('Display name')) ?></label>
    <input id="display-name"
           type="text"
           wire:model="displayName"
           value="<?= $escaper->escapeHtmlAttr($magewire->displayName) ?>">

    <button type="button" wire:click="save">
        <?= $escaper->escapeHtml(__('Save')) ?>
    </button>
</div>

The matching component declares public string $displayName = ''; and a save() action. The action validates the submitted value before using it.

Choose when to send a request

Use a live binding when server-rendered results should change as the user types. For a product search, debounce the requests:

<input type="search"
       wire:model.live.debounce.300ms="query"
       value="<?= $escaper->escapeHtmlAttr($magewire->query) ?>">

Use .blur for a field that should update after the user leaves it:

<input type="text"
       wire:model.blur="postcode"
       value="<?= $escaper->escapeHtmlAttr($magewire->postcode) ?>">

For a complete form, see wire:submit. All bound values are browser-controlled input. Keep secrets and permission decisions out of public properties and validate values before persistence.