Inline Edit Field

What's Included

• index.html: a responsive form with six editable details and a disabled reference.
• assets/style.css: responsive component styles and two theme token sets.
• assets/script.js: readable source with deferred-execution protection and teardown.
• assets/script.min.js: minified production build.
• Expanding edit surface, layered controls and a brief saved check.
• Text, email, URL and multiline fields with announced validation errors.
• Independent instances and a bubbling save event for application integration.

Quick Start

Load the stylesheet in your head:

Code snippet omitted: it ships with the download.

Copy a complete .inline-edit[data-inline-edit] block from index.html. Give each instance unique IDs, update the matching ARIA references, and set the input's name, type and initial value alongside the displayed text.

Add the dependencies and component script before </body>:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

Keep the documented data-edit-* hooks on the trigger, value, surface, form, input, cancel button, error, status and saved mark. The demo toolbar and .stage / .stage__inner layout are demo furniture. Remove the global body/layout rules when embedding the component into an existing page; retain the tokens and .inline-edit rules.

The optional .inline-edit-group[data-inline-edit-group] groups fields into a responsive two-column layout; neighbouring fields move as an editor opens or closes. It stacks on small screens. Each field owns its own form and save action, so use a section or div as the group, not another form. Keep .inline-edit-group__fields for the grid and use .inline-edit--wide for a full-width field.

Keyboard & Accessibility

Save and cancel return focus to the value button. The editor is an inline form, so focus is not trapped and the page stays scrollable. Clicking outside leaves the draft open. Native labels and buttons provide names; aria-invalid and an associated role="alert" explain invalid values. A role="status" announces local updates and cancellation. Disabled triggers cannot open. Reduced motion preserves every action with immediate state changes.

How It Works

Select a displayed value to reveal its editable field and actions. Save accepts valid input and returns to the compact value with a brief check; cancel restores the previous value. Each instance operates independently, and the same interaction works with touch or a keyboard.

Teardown

On SPA unmount, call window.inlineEditContext.revert() to remove listeners, stop feedback timers and restore the display layout. Mount the script again when inserting new markup.

Customisation

• Set native input required, type, maxlength and name attributes to fit your data. Required, email and URL errors have specific messages; other constraints use the browser's validation message. A textarea with data-edit-input supports multiline values.
• Add disabled to the value button to prevent editing (and to the input for the disabled specimen).
• Set data-empty-label="Add a value" on the root for optional empty values.
• Adjust .inline-edit__surface for resting width; the open surface fills its container.
• Change durations and easing in morph() and the control/check tweens.

Themes

Ships in dark (default) and light. Put the attribute on the page body or an individual component:

Code snippet omitted: it ships with the download.

The demo supports ?variant=light and ?variant=dark. Component JS never reads the theme name.

Re-value --ground, --ground-2, --raised, --hover, --ink, --ink-2, --ink-3, --line, --line-strong, --accent, --accent-ink, --error, --shadow, --font, --radius, --radius-sm and --radius-xs in either theme block for your product. Keep text contrast at least 4.5:1.

Requirements

• GSAP 3.12+ and Flip.
• Modern browser; no build step or framework required.
• JavaScript for editing; initial values remain readable without it.