Live demo — this example is server-driven; run the showcase locally for the interactive version.

Inline edit

Click-to-edit a single field in place — pencil to enter edit mode, check / X to confirm or cancel. Alpine tracks the editing state; in production wire the check button to hx-post to persist.

Examples

Basic

Click the pencil to enter edit mode. Alpine tracks the editing flag + the live value.

With label

A single value with a bold pf-v6-c-inline-edit__label; the pencil switches to an input with an icon save/cancel group.

Multiple fields

One Edit toggle switches every field to an input at once, with a pf-m-footer action group (Save / Cancel) — the whole-row edit pattern.

Validated

The input reflects validity as you type — empty shows pf-m-error + an error helper and disables Save; non-empty shows pf-m-success.

Free form edit

A bare __editable-text block — core renders it inert; ours is contenteditable.

Free form text — click and type to edit.

Inline edit table row

Row-level inline editing in a table lives in the Table editable rows example, which drives pf-v6-c-table__inline-edit-action with live Alpine state.

Documentation

Inline edit props

Parameters accepted by {#include components/forms/inline-edit ... /}. Model mode: pass inlineEdit=<InlineEdit> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`value`	String	Initial displayed / editable value.

Usage

Server persistence. The runtime's save button just exits edit mode. To persist, replace the @click on the check button with hx-post="/save" + the field value.

Edit inline-edit.html on GitHub