# Inline edit
A value changed where it shows - a title in a list, a name on a page - behind a real Edit button, in a small form of its own that saves or cancels.
## Examples
The value has an id; the Edit button names the form by `commandfor` with `command="--edit"`; the form, of class `inline-edit-form`, names the value by `data-for` and holds the field, its Save button and a Cancel button with `command="--cancel"`. `--edit` shows the form in place of the value, the field focused and its text selected; `Enter` saves, `Esc` or Cancel puts the field back, and the focus returns to the Edit button. A click elsewhere leaves the form open.
```html
Excursions
North Bay: marine park by speedboat
Night market and street food
```
### Saved by the page
The form's submit fires `redz:save` on it, with the form and the field's value. A page that saves cancels it and answers with a promise: the Save button is busy until it settles - resolved, the value shows the saved text and the form closes; rejected with words, the form stays open, the field marked invalid and the words in its `invalid-feedback`, said at once. Left alone, the value shows the text and the field keeps it. The second row above answers after 600 ms and refuses an empty title.
```js
document.addEventListener('redz:save', (event) => {
event.preventDefault();
event.detail.respondWith(fetch(event.detail.form.action, {method: 'POST', body: new FormData(event.detail.form)})
.then((answer) => answer.ok ? answer.text() : answer.text().then((words) => Promise.reject(words))));
});
```
### Inside another form
A form cannot sit in a form: where the value lives in one - a settings page with a save bar - the edit form is a `popover="manual"` placed outside it, with the class `menu` for its panel; `--edit` opens it beside the Edit button.
```html
Example Cruises
```
## Keyboard and accessibility
| Key | Does |
| --- | --- |
| `Enter`, `Space` on Edit | Opens the form, the focus in the field, its text selected |
| `Enter` in the field | Saves |
| `Esc` | Puts the field back and closes the form, the focus on Edit |
- Edit is a real button named after what it edits - the value's own text may be a link to its record and stays one.
- The form saves only by its Save button or `Enter`: a blur never commits half an edit, and never throws one away.
- A refused save keeps the focus in the field; `invalid-feedback` takes `role="alert"`, so the page's words are said at once, and the field names it in `aria-describedby`.
## Tokens
From [`css/components/inline-edit.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/inline-edit.css), which declares no custom property of its own.
It reads the theme's `--redz-space-8`, `--redz-space-12`.