◇

Editable

7 parts

Inline-editable text field that toggles between a read-only preview and an editable input. Root owns the value (via v-model), edit state, and submit / cancel behavior, providing them to its parts. Use it for click-to-edit labels, titles, and table cells where a full form input would be heavy.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  EditableRoot,
  EditableArea,
  EditablePreview,
  EditableInput,
  EditableEditTrigger,
  EditableSubmitTrigger,
  EditableCancelTrigger,
} from '@robonen/primitives/forms/editable';

<EditableRoot>
  <EditableArea />
  <EditablePreview />
  <EditableInput />
  <EditableEditTrigger />
  <EditableSubmitTrigger />
  <EditableCancelTrigger />
</EditableRoot>

API Reference

EditableRoot

Root

Inline-editable text field that toggles between a read-only preview and an editable input. Root owns the value (via `v-model`), edit state, and submit / cancel behavior, providing them to its parts. Use it for click-to-edit labels, titles, and table cells where a full form input would be heavy.

Prop	Type	Default	Description
`defaultValue`?	`string`	`''`	Uncontrolled initial value.
`placeholder`?	`string \| EditablePlaceholder`	—	Placeholder for edit / preview. A single string applies to both.
`activationMode`?	`EditableActivationMode`	`'focus'`	When the preview should switch to edit mode.
`submitMode`?	`EditableSubmitMode`	`'blur'`	How edits are committed.
`startWithEditMode`?	`boolean`	—	Mount in edit mode.
`selectOnFocus`?	`boolean`	—	Select the input content on focus.
`autoResize`?	`boolean`	—	Grid-based auto resize mode — preview and input share a grid cell.
`maxLength`?	`number`	—	Max input length.
`disabled`?	`boolean`	—	Disabled state.
`readonly`?	`boolean`	—	Read-only state.
`dir`?	`Direction`	—	Reading direction. When omitted, inherits from the active `ConfigProvider` and otherwise assumes left-to-right.
`id`?	`string`	—	Stable id, applied to the input and forwarded through context.
`name`?	`string`	—	Native control name. When set and the Root is inside a `<form>`, a visually-hidden `<input>` submits the value with the surrounding form.
`required`?	`boolean`	—	Mark the field required so native form validation fires on empty submit.
`modelValue`?	`string`	—	Two-way bound value (`v-model`).

Emits

Event	Payload
`update:modelValue`	`[value: string]`

EditableArea

Area

Wrapper that groups the preview and input. It mirrors edit/empty/disabled state via data attributes and, when `autoResize` is set, becomes the grid that sizes the input to match the preview text.