Editable

Click/Enter/Space enters edit mode; Enter submits, Esc cancels, and empty-value submission is non-destructive by default. Supports multiline editing, icon triggering, controlled editing state, and the four-way submit-mode matrix.

Basic Usage

Click to edit

Example

Click the text (or press Enter/Space when focused) to enter edit mode; Enter submits, Esc reverts.

Placeholder

Empty value placeholder

Example

placeholder is shown when the value is empty.

Submit Mode Matrix

submit-on-enter=false (button/blur only)

Example

submit-on-blur=false (no accidental submits)

Example

Both off (explicit buttons only)

Example

submit-on-enter (default true) and submit-on-blur (default true) combine into four submit modes: both (default) / Enter only / blur only / buttons only.

Controlled Editing

editing attribute programmatic control

Enter/exit editing

Example

default-editing starts in edit mode (new-item scenario)

Example

• Setting the editing attribute enters edit mode; removing it exits through the cancel path (non-destructive, dispatches oas-cancel)
• Internal enter/exit reflects the editing attribute; hosts can watch the attribute or the oas-editing event (detail: { editing: boolean }, dispatched once on enter and once on exit)

Multiline Editing

multiline (Ctrl/⌘+Enter submits)

Example

With multiline the edit mode renders a textarea: Enter inserts a newline, Ctrl/⌘ + Enter submits, Esc cancels; the height auto-grows with content (minimum one line). Ctrl+Enter during an IME composition (candidate confirmation) does not submit accidentally.

Icon Triggering

trigger=icon (pencil button, accidental-click safe)

Example

trigger="text" (default) edits on text click; with trigger="icon" the text is plain display and the trailing pencil button carries the interaction (focusable; Enter/Space/click enters edit); with trigger="dblclick" double-click enters edit (single click doesn't trigger, so text stays selectable; Enter/Space while focused enters edit as a keyboard fallback). Useful when text clicks may conflict with page behavior.

trigger=dblclick (double-click to edit)

Example

Custom Display

template[slot=display] icon + text

Example

template[slot="display"] clones the display content: [data-display-value] binds the current value and [data-display-placeholder] binds the placeholder text; the default falls back to plain text.

Custom Action Icons

template[slot=ok-icon] / [slot=cancel-icon]

Example

Empty-Value Semantics

allow-empty (allow clearing)

Example

By default an empty submission reverts to the old value and dispatches oas-cancel (non-destructive); with allow-empty an empty value submits as an empty string and dispatches oas-change (the "clear/reset" scenario).

Size / Status / Readonly

size variants

Example

status=error

Example

readonly (focusable, readable, not editable)

Example

readonly differs from disabled: it keeps normal text color, stays focusable and copyable, and only blocks entering edit mode (aria-readonly).

maxlength

Length limit

Example

Disabled

disabled

Example

Events

Submit/cancel/editing-state events

Example

Listen to oas-change (submit), oas-cancel (cancel/empty submit), and oas-editing (editing-state toggle, detail: { editing }):

Non-Text Inplace Editing (Composition Pattern)

For "click to swap in arbitrary content" (tables, images), no extra component is needed — display slot + host-side toggling replaces it:

Host v-if toggle + display slot composition

ADisplay: avatar + name (arbitrary content)Edit

Example

The host toggles between display and edit blocks of arbitrary content with v-if / hidden (a few lines of boilerplate); for text scenarios use oas-editable directly (its display slot + controlled editing encapsulate the same mechanism).

Capability Overview (page notes)

• submit-on-blur: default true (blur submits, the existing behavior); false completes the four-way submit matrix
• editing / default-editing: controlled / initial editing state (exits always go through the submit/cancel paths)
• multiline: multiline editing — Ctrl/⌘+Enter submits, Enter inserts a newline, auto-growing height
• trigger: text | icon | dblclick (click text / pencil button / double-click to edit, all configurable)
• allow-empty: allow submitting an empty string (non-destructive revert by default)
• size / status / readonly: three sizes, validation status, readonly
• Slots: template[slot="display"] (data-display-value / data-display-placeholder bindings), ok-icon / cancel-icon
• Events: oas-editing { editing } (existing oas-change / oas-cancel unchanged)

API

oas-editable

Attributes

Attribute	Description	Type	Default
allow-empty	Allow committing an empty value (default unchanged/non-breaking; empty restores the old value)	boolean	—
default-editing	Start in editing on mount (consumed once)	boolean	—
disabled	Disabled	boolean	—
editing	Controlled editing state (internal enter/exit auto-reflects; host removal takes the cancel path)	boolean	—
maxlength	Maximum input length	string	—
multiline	Multi-line editing (textarea; Enter for newline, Ctrl/⌘+Enter to commit, auto-grow)	boolean	—
placeholder	Empty value placeholder	string	—
readonly	Read-only (focusable, readable, not editable, aria-readonly)	boolean	—
size	Size preset small / medium (default) / large	string	medium
status	Validation status: error / warning / success	string	—
submit-on-blur	Commit on blur (default true; with submit-on-enter forms both/enter/blur/none)	string	true
submit-on-enter	Whether Enter submits	string	true
trigger	Trigger: text (default, click text) / icon (pencil button, prevents misclicks) / dblclick (double-click to edit; single click doesn't trigger; Enter/Space while focused enters edit as keyboard fallback)	string	—
value	Current value (controlled)	string	—

Property (JS property; see each row for attribute reflection)

Property	Description	Type	Default
value	Current value: the input text while editing, otherwise the value attribute	string	—

Events

Event	Description
oas-cancel	Cancel/empty-value submit (reverts to old value), non-destructive by default, detail: { value: oldValue } | { value: this.getAttr('value', '') }
oas-change	New value submitted, detail: { value }
oas-editing	Fires on entering/exiting editing, detail: { editing }

Slots

Name	Description
template[slot="display"]	Custom display state ([data-display-value]/[data-display-placeholder] bindings)

Keyboard: in display mode Enter/Space/click enters edit mode; in edit mode Enter submits, Esc reverts and blurs.

ARIA: display mode has role="button" + aria-label="Edit"; the edit-mode input keeps the same label.