Inline Edit

x-bladewind::inline-edit shows a value as plain text until the user clicks it (or its edit icon), then swaps in a text field with Save and Cancel controls. With no onSave, it saves optimistically: the display updates the instant Save is clicked, and a hidden field carries the current value for a normal form submission alongside the rest of the page.

<x-bladewind::inline-edit name="project_name" value="Q3 Marketing Campaign" />

Click the text (or its pencil icon) to edit, Enter to save, Escape or the × button to cancel. An empty value shows placeholder in a muted, italic style instead of nothing.

An async save

Pass onSave as a raw JavaScript expression, wrapped internally in a function that receives (newValue, oldValue) and may return a Promise. While that promise is pending, the field and both controls disable and the save button shows a spinner. Resolving it updates the display to the new value; rejecting it shows the rejection's message (or a generic one) and leaves edit mode open so the user can fix the value and retry.

<x-bladewind::inline-edit name="project_name" value="Q3 Marketing Campaign" on-save="renameProject(1, newValue)" />

<script>
    function renameProject(id, name) {
        return fetch(`/projects/${id}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name }),
        }).then((response) => {
            if (! response.ok) throw new Error('Could not rename the project');
        });
    }
</script>

Required and validation

Set required="true" to block saving an empty value; the field shows requiredMessage instead and stays in edit mode. Any rejection from onSave (for a server-side validation failure, say) surfaces the same way.

<x-bladewind::inline-edit name="project_name" required="true" required-message="A project needs a name" />

Full List Of Attributes

Inline Edit with all attributes defined

<x-bladewind::inline-edit
name="project_name"
value="Q3 Marketing Campaign"
placeholder="Click to edit"
required="true"
required-message="A project needs a name"
maxlength="60"
on-save="renameProject(1, newValue)"
save-label="Save"
cancel-label="Cancel"
edit-label="Edit"
class="ml-2" />