#Editable Text

Moves safely between reading and editing a short value while retaining save, cancel, validation, and focus-return paths.

npm install @a3s-lab/ui@0.4.0

<div class="editable-text">
  <div data-editable-display><span data-editable-value>Release notes</span><button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="edit">Edit</button></div><form data-editable-form><input class="input" value="Release notes" aria-label="Title" /><button type="submit" class="btn" data-size="sm" data-editable-action="save">Save</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="cancel">Cancel</button></form>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="editable-text">
  <div data-editable-display><span data-editable-value>Release notes</span><button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="edit">Edit</button></div><form data-editable-form><input class="input" value="Release notes" aria-label="Title" /><button type="submit" class="btn" data-size="sm" data-editable-action="save">Save</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="cancel">Cancel</button></form>
</div>

#Standalone controller

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/editable-text";

const component = document.querySelector(".editable-text");
component.getState();

The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

#Contract

#Product boundary

Inline editing suits one low-risk value. Multi-field changes, long content, protected actions, and approval work belong in a full form or dialog flow.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Editing, saving, and cancelling are keyboard reachable. Escape restores the prior value, failure preserves input and focus, and state changes avoid layout jumps.