Reference
Editable
Editable, dressed in the paper-and-ink system: bare ink while reading, the full field recipe while editing. The parts — Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger, CancelTrigger, Control. Preview renders the machine's value as text (the asChild escape hatch stays with the Ark primitives).
Root · Area · Label · Preview · Input · EditTrigger · SubmitTrigger · CancelTrigger · Control
#Area
A styled part — no props of its own; it takes the anatomy's shared styling.
#CancelTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Control
A styled part — no props of its own; it takes the anatomy's shared styling.
#EditTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Input
A styled part — no props of its own; it takes the anatomy's shared styling.
#Label
A styled part — no props of its own; it takes the anatomy's shared styling.
#Preview
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the control-height ladder for the editing field. |
activationMode | editable.ActivationMode | "focus" | The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked |
autoResize | boolean | Whether the editable should auto-resize to fit the content. | |
defaultEdit | boolean | Whether the editable is in edit mode by default. | |
defaultValue | string | The initial value of the editable when rendered. Use when you don't need to control the value of the editable. | |
disabled | boolean | Whether the editable is disabled. | |
edit | boolean | Whether the editable is in edit mode. | |
finalFocusEl | () => HTMLElement | null | The element to receive focus when the editable is closed. | |
form | string | The associate form of the underlying input. | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; area: string; label: string; preview: string; input: string; control: string; submitTrigger: string; cancelTrigger: string; editTrigger: string; }> | The ids of the elements in the editable. Useful for composition. | |
invalid | boolean | Whether the input's value is invalid. | |
maxLength | number | The maximum number of characters allowed in the editable | |
modelValue | string | The v-model value of the editable | |
name | string | The name attribute of the editable component. Used for form submission. | |
placeholder | string | { edit: string; preview: string; } | The placeholder text for the editable. | |
readOnly | boolean | Whether the editable is read-only. | |
required | boolean | Whether the editable is required. | |
selectOnFocus | boolean | true | Whether to select the text in the input when it is focused. |
submitMode | editable.SubmitMode | "both" | The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing Enter and blurring the input will trigger submit |
translations | editable.IntlTranslations | The translations for the editable. |
| Event | Payload |
|---|---|
valueChange | details: ValueChangeDetails |
update:modelValue | value: string |
focusOutside | event: FocusOutsideEvent |
interactOutside | event: InteractOutsideEvent |
pointerDownOutside | event: PointerDownOutsideEvent |
editChange | details: EditChangeDetails |
valueCommit | details: ValueChangeDetails |
valueRevert | details: ValueChangeDetails |
update:edit | edit: boolean |
#SubmitTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.