Editable
Introduction
An inline text field that displays as plain text until activated (via focus, click, or double-click), then swaps into a fully editable text input with submit and cancel triggers. Perfect for inline detail editors, document renamers, and settings lists.
Usage
These examples illustrate how content editors bind and structure interactive editable fields.
1. Standard Focus Activation
The field activates immediately when focused (tabbed to) or clicked, enabling smooth and fast tabbing across multi-row preference configurations.
{
"type": "editable",
"label": "Project Name",
"defaultValue": "Artefact UI Suite",
"placeholder": "Enter project name...",
"size": "md",
"activationMode": "focus",
"submitMode": "both",
"interactive": true
}
2. Double-Click Title Customizer
Replicates standard filesystem behavior. The label displays as static bold text and only swaps into an input field upon double-clicking. Ideal for page headers or document file titles.
{
"type": "editable",
"label": "Document Title",
"defaultValue": "Annual_Report_2025",
"placeholder": "Untitled document",
"size": "lg",
"activationMode": "dblclick",
"submitMode": "enter",
"interactive": true
}
3. Dense Layout Value Field (Extra-Small Scale)
Demonstrates a highly compact size scale designed for dense tabular data grids, sidebar metadata listings, or secondary attributes.
{
"type": "editable",
"label": "Port Config",
"defaultValue": "8080",
"placeholder": "Set port...",
"size": "xs",
"activationMode": "click",
"submitMode": "blur",
"interactive": true
}
4. Multiline (Description / Notes Field)
Set multiline to render a resizable <textarea> instead of a single-line input — for descriptions, notes, or any value that spans more than one line. Plain Enter inserts a newline instead of committing; Cmd/Ctrl+Enter (or blur, depending on submitMode) submits.
{
"type": "editable",
"label": "Notes",
"defaultValue": "First line of notes.\nSecond line continues here.",
"multiline": true,
"rows": 3,
"submitMode": "blur",
"interactive": true
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Label Text (label) | string | - | Descriptive visual label rendered above the editable value preview. |
Default Value (defaultValue) | string | - | The initial text content loaded inside the field. |
Placeholder (placeholder) | string | - | Light placeholder text shown in the preview when the value is left empty. |
Size Scale (size) | select | "md" | Overall height, padding, and text size scaling. • Options: "2xs", "xs", "sm", "md", "lg". |
Activation Trigger (activationMode) | select | "focus" | Specifies how the user activates the inline preview into edit mode. • Options: "focus" (on focus/click), "click" (single click), "dblclick" (double click), "none" (requires trigger click). |
Submit Handler (submitMode) | select | "both" | Specifies which interaction commits the changes back to state. • Options: "enter" (Enter key), "blur" (blur focus), "both" (both enter and blur), "none" (requires manual submit click). |
Multiline (multiline) | boolean | false | Renders a resizable <textarea> instead of a single-line input, for descriptions/notes. Plain Enter inserts a newline; Cmd/Ctrl+Enter submits regardless of submitMode. |
Rows (rows) | number | 3 | Initial textarea row count when multiline is set. The field remains manually resizable. |
Developer Notes & Accessibility
- Smart Interactive Hydration: Since switching layout states requires dynamic element swapping and keydown interception, the Editable component hydrates as a Preact island on client machines by default.
- Accessible Inputs: The preview element acts as a semantic button (
role="button",tabIndex={0}) when inactive, allowing screen-readers to focus and activate edit mode via the keyboard. - Form-Ready Submissions: To easily integrate with post forms, the component syncs its active values to a native hidden form input, ensuring native form submissions capture committed edits correctly.