---
title: Inline Edit
description: Edit a value in place, with an explicit confirm step
visibility: guest
draft: false
---
# Inline Edit
Turns a displayed value into an editor in place and back again. The reader stays where they are — no dialog, no separate form page — and nothing is written until they confirm.
> **Not for a yes/no value.** Reach for [toggle](/components/toggle) there: the control is already its own read state, so the confirm/cancel machinery buys nothing and costs two extra tab stops per row. This component earns its weight when the value is text a reader has to type — and only then.
## Basic Usage
:::preview{title="Edit a title in place"}
:::
The component does not save anything. It emits an event when the reader confirms, and your Livewire component decides what that means:
:::source{language="blade"}
:::
:::source{language="php"}
public function save(string $value): void
{
$this->post->update(['title' => $value]);
// Tell the component it worked. It does NOT infer this from the round trip
// ending — a validation failure ends one too.
$this->dispatch('wirekit:inline-edit-saved', name: 'title');
}
:::
Livewire compiles any non-reserved `wire:` into an Alpine listener, so no wrapping element is needed.
## The editor stays open until the save is confirmed
This is the part worth reading twice. When the reader confirms, the component enters a saving state and **waits**. It closes when you say the save succeeded, and not before.
That is deliberate: the end of a round trip is not evidence of success. A validation failure completes a request too, and a component that closed there would discard the error message you just rendered, leaving the reader looking at their old value with no explanation.
Three ways the outcome is reported:
| Event | Meaning |
| --- | --- |
| `wirekit:inline-edit-saved` | Written. The editor closes and focus returns to the trigger |
| `wirekit:inline-edit-failed` | Rejected. The editor stays open, focus does **not** move, so the reader is still looking at what they must fix |
| neither, within `saveTimeout` | No answer arrived. The editor gives up rather than staying busy forever, and says the state is unknown |
Filter by `name` in the event detail when a page holds several editors.
## Livewire
The component owns the interaction; your component owns the write. It emits `wirekit:inline-edit-confirmed` with `name`, `value` and `previous`, and waits.
::: warning
**`wire:model.blur` does not save in Livewire 4.** `.live` became its own modifier, so what used to mean "send on blur" is now spelled `wire:model.live.blur`. Every older guide — and muscle memory — says otherwise, and the failure is silent: the field looks bound and nothing reaches the server. Do not reach for it here in any case; this component commits explicitly, which is the point of it.
:::
**Do not bind the draft two-way.** A `wire:model` on the control writes on every keystroke, which leaves nothing to confirm and nothing for cancel to restore. The draft stays local until the reader commits — that is the whole design, not an optimization.
### Validation errors
A validation failure comes back as re-rendered HTML with a filled error bag, not as a transport error. The component reads the bag under the field's `name`, keeps the editor open, links the message with `aria-describedby`, and announces it:
:::source{language="php"}
public function save(string $value): void
{
$this->validate(['title' => 'required|max:120'], [], ['title' => $value]);
// On failure Livewire re-renders and the bag is filled — nothing else to do.
$this->post->update(['title' => $value]);
$this->dispatch('wirekit:inline-edit-saved', name: 'title');
}
:::
### Surviving a morph
A Livewire morph must not close an open editor or lose a draft. Three rules make that hold, and all three are in the component already:
- The mode switch uses `x-show`, not `x-if`. Livewire stops patching attributes while a visibility state differs, so `x-show` survives; `x-if` would tear the open editor down mid-edit.
- Nothing server-rendered sits on the element that toggles. An id or an `aria-busy` there would stop being updated by the morph.
- There is no `wire:ignore` on the root — it would cut the error text and the displayed value off from updates too.
**Add `wire:key` when you render these in a loop**, so a morph keeps each editor attached to its own row.
### Several editors at once
`exclusive` (default `true`) closes any other open editor when one opens. Without it a reader can carry ten unsaved drafts, and a `wire:navigate` takes all ten with it. If you turn it off, the browser still warns before a navigation that would discard an open draft.
## Affordance
Two independent choices: what the reader **sees**, and what **opens** the editor.
:::preview{title="The three trigger styles"}
:::
::: warning
**`always` costs a tab stop per field.** Twenty editable rows are twenty extra stops before anyone reaches the content below them. In a dense table `hover` or `focus-only` is usually the kinder choice — but pick it for that reason, not because the pencil looks untidy.
:::
There is deliberately **no** way to remove the button. Plain text is not focusable, so a value with no button cannot be reached by keyboard at all. `focus-only` gives the quiet appearance without that defect: nothing is shown until the reader tabs to it, and then it is a real, visible, full-size button.
`openOnValueClick` (default `true`) makes the value itself clickable. It is a separate switch because it answers a different question, and the value never becomes the button — a button named *Jane Doe* tells a screen-reader user nothing about what it does, and giving a control a name that is not its visible text breaks voice control.
Two behaviors follow from that clickable value, and both only show up on a real page:
- **Dragging across the value selects text, it does not open the editor.** Selecting requires moving the mouse, so a movement beyond a few pixels is read as a selection.
- **A link inside the value follows the link.** Otherwise the link would be unreachable by mouse.
## Keyboard
| Key | Action |
| --- | --- |
| `Enter` | Confirm |
| `Cmd/Ctrl + Enter` | Confirm — works in every control type |
| `Escape` | Cancel and restore the previous value |
| `Tab` | Reach the trigger in every affordance style |
In a **textarea** `Enter` writes a line, so it does not commit — `Cmd/Ctrl + Enter` does. That is also why the confirm and cancel buttons cannot be switched off for that control: without them and without knowing the shortcut, a reader would have no way to save at all, and the remaining exit discards.
Both `Enter` and `Escape` stop where they are handled. Without that, `Escape` inside a modal would close the modal as well as canceling the edit, and `Enter` inside a `