# Inline edit A printed label that becomes a field when you press it. At rest it is plain printing, so a page of them reads as text; under the pointer an outline and a pencil say it can be changed. Pressed, it is let into the plate as the field, in the same type, so the words stay where they were. Enter prints the new words back and Escape puts the old ones back. Kit part · Free · https://tactileui.dev/parts/inline-edit - Element: `` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Inputs - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### At rest · plain printing ```html

``` ### Hover · outline and pencil ```html

``` ### Open · the field ```html

``` ### Empty · prompt in its place ```html

``` ### Required and empty · held open ```html

``` ### Long words are cut with an ellipsis ```html

``` ## Every state - Rest - Hover - Focus - Open - Invalid - Disabled Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | | element | with label, and required or empty if wanted | The label and its field. label names the field; required refuses an empty save; empty is the prompt shown when there are no words. | | button.tui-inline-edit__print | element | holds .tui-inline-edit__text | The printed words, a real button. The script gives it its pencil and a name that includes the words. | | input.tui-inline-edit__input | element | hidden at first | The real field. It posts with a form whether it is open or not; set its name and value. | | value | property | string | The words as last saved; setting it reprints them. | | editing | property | boolean | Whether the field is open. | | tui-inline-edit | event | detail { value, previous } | Bubbles from the element when new words are saved; change fires from the input as ever. | | inlineEditResolve(options) | function | { action, previous, draft, required, label } | What an edit comes to: saved, unchanged, cancelled or invalid, with the words said aloud. Pure. | | Enter · Escape · Tab | key | in the field | Save and close; put the old words back and close; keep what was typed and move on. | | Enter · Space | key | on the words | Open the field with its text selected. | ## Markup ```html ``` ```js import { inlineEditResolve } from '/kit/kit.mjs'; const title = document.querySelector('tui-inline-edit'); title.addEventListener('tui-inline-edit', (e) => { api.rename(e.detail.value); // saved; e.detail.previous is what it was }); title.value; // 'Northwind billing' inlineEditResolve({ action: 'save', previous: 'A', draft: ' B ', label: 'Name' }); // { outcome: 'saved', value: 'B', done: true, say: 'Name saved: B' } ``` The demo on the page: ```html ``` ## Usage notes Press the project name, change it and press Enter: it prints back and the line under it says what was saved. Press it again and Escape puts the old name back. Press the owner and click away: moving away keeps what you typed. The name is required, so an empty save keeps the field open. ## Accessibility - The words are a native `