# Inline Edit Field

> Edit a value in place with a compact expanding field, clear save and cancel actions, inline validation and a quiet saved confirmation.

Canonical: https://gsapvault.com/ui-elements/inline-edit-field
Live demo: https://gsapvault.com/demos/inline-edit-field/index.html

| Property | Value |
|----------|-------|
| Type | ui-element |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Flip |
| Techniques | flip-layout, micro-interaction, form-animation |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

An inline editor that keeps small changes beside the value being edited. A compact value opens into a focused field with save and cancel actions, then settles back into place with a brief confirmation. The larger form demo includes text, email, website and multiline fields, independent saves, validation, a disabled reference, and light and dark themes.

## Features

- Compact display and expanded editing states
- Text, email, URL and multiline fields with inline validation
- Enter to save and Escape to cancel
- Focus returns to the edited value
- Brief confirmation after each local update
- Disabled example and reduced-motion support
- Light and dark themes
- Save event for application integration
- Responsive form layout with animated neighbouring fields

## Use Cases

- Editable account details without a separate form page
- Record names and contact fields in dashboards
- Small content updates in administration tools
- Project metadata that stays readable between edits

## Vibe-Code Ready Setup

This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Select a value to edit it in place. Save accepts valid input and shows a brief confirmation; cancel restores the previous value. The component includes a save event for connecting changes to your application, with the standalone demo keeping updates in memory only.

## Documentation

How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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

| Key | Action |
| --- | --- |
| Enter or Space on the value button | Opens the editor and selects its value |
| Enter in the input | Validates and saves |
| Enter in a multiline description | Inserts a new line |
| Ctrl+Enter / Cmd+Enter in a multiline description | Validates and saves |
| Escape inside the form | Discards the edit and restores the previous value |
| Tab / Shift+Tab | Moves through the input, Cancel, Save and the remaining page |

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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium UI element. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Inline Edit Field](https://gsapvault.com/ui-elements/inline-edit-field)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt