Editable

Switch inline content between preview and validated editing states.

Usage

Basic

Use the smallest complete composition and let it own its initial value.

Use the smallest complete composition and let it own its initial value.

release-candidate

Click the value or Edit

Validated

Reject an invalid edit while preserving the last accepted value.

Reject an invalid edit while preserving the last accepted value.

release-candidate

Lowercase letters, numbers, and hyphens

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Let the parent own the current value and apply accepted changes back to the component.

release-candidate

Click the value or Edit

API

Vue package: @sectile/vue/editable

Components

• EditableRoot
• EditableArea
• EditablePreview
• EditableInput
• EditableEditTrigger
• EditableSubmitTrigger
• EditableCancelTrigger

Props

EditableRootProps

as

TypePrimitiveAsDefaultundefined

Element or component rendered for this part.

asChild

TypebooleanDefaultundefined

Whether to merge this part into its single child instead of rendering a wrapper.

defaultValue

TypestringDefault''

Initial value used when the component owns its state.

disabled

TypebooleanDefaultfalse

Whether interaction is unavailable.

label

TypestringDefaultundefined

Accessible name announced for the control.

modelValue

TypestringDefaultundefined

Current value when state is controlled by the parent.

name

TypestringDefaultundefined

Name used for native form submission.

policies

TypeEditablePoliciesDefaultundefined

Behavior policies that customize validation, movement, or selection.

readonly

TypebooleanDefaultfalse

Whether the value can be inspected but not changed.

submitOnBlur

TypebooleanDefaultfalse

Whether leaving the editor commits the current draft.

EditablePartProps

as

TypePrimitiveAsDefaultVaries by part

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

Slots

EditableRootSlotProps

disabled

Typeboolean

Whether interaction is unavailable.

draft

Typestring

Current uncommitted input text.

editing

Typeboolean

Whether editing is active.

readonly

Typeboolean

Whether the value can be inspected but not changed.

value

Typestring

Current value exposed by this contract.

Events

EditableRoot

update:editing

Payloadboolean

Emitted when editing starts or stops.

update:modelValue

Payloadstring

Emitted when the component requests a new controlled value.

Other types

EditableValueChangeHandler

type EditableValueChangeHandler = (value: string) => void

EditableEditingChangeHandler

type EditableEditingChangeHandler = (editing: boolean) => void

Parts

Shared scope: [data-scope="editable"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
root	[data-part="root"]	Defines the component boundary and owns its composed parts.	—
area	[data-part="area"]	Provides the two-dimensional interaction surface.	—
preview	[data-part="preview"]	Shows the committed value outside editing mode.	—
input	[data-part="input"]	Accepts the editable value or draft.	—
edit-trigger	[data-part="edit-trigger"]	Enters editing mode.	—
submit-trigger	[data-part="submit-trigger"]	Commits the current draft.	—
cancel-trigger	[data-part="cancel-trigger"]	Discards the current draft.	—

Keyboard interaction

Key	Behavior
Enter	Start editing from the preview, or commit a single-line draft.
Escape	Cancel editing and restore the accepted value.
Tab	Move through the preview, input, and explicit action controls.

Accessibility

Preview and input states remain distinguishable; invalid drafts are announced on the real input.