Inline Edit
A click-to-edit text component that shows a read-only value and swaps into an input or textarea in place on click, with confirm and cancel actions.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | The current text value |
placeholder | string | — | Placeholder text shown when the value is empty |
multiline | boolean | — | Use a textarea instead of a single-line input |
disabled | boolean | — | Prevent entering edit mode |
editing | boolean | — | Boolean state attribute to programmatically control edit mode |
submit-on-blur | boolean | — | Confirm the edit when the field loses focus |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/inline-edit.js"></script>import "./pura/lib/inline-edit.js";