Editable

Inline-editable text: a preview that becomes an input on activation, with submit/cancel.

<div
  data-controller="zag-editable"
  data-part="root"
  data-zag-editable-value-value="Ada Lovelace"
  class="max-w-sm"
>
  <div data-part="area" class="flex items-center gap-2">
    <span data-part="preview" class="hover:bg-accent rounded px-2 py-1 text-sm"></span>
    <input
      data-part="input"
      class="border-input focus:ring-ring/50 rounded border px-2 py-1 text-sm focus:outline-none focus:ring-2"
    />
    <div data-part="control" class="flex gap-1">
      <button data-part="edit-trigger" class="text-primary text-sm hover:underline">Edit</button>
      <button data-part="submit-trigger" class="text-success text-sm hover:underline">Save</button>
      <button data-part="cancel-trigger" class="text-muted-foreground text-sm hover:underline">
        Cancel
      </button>
    </div>
  </div>
</div>

Parts

root, label, area, preview, input, control, edit-trigger, submit-trigger, cancel-trigger.

Values

Attribute	Type	Default	Description
data-zag-editable-value-value	String	""	Initial value.
data-zag-editable-placeholder-value	String	""	Placeholder when empty.
data-zag-editable-activation-mode-value	String	"click"	"focus", "dblclick", "click", "none".
data-zag-editable-submit-mode-value	String	"both"	"enter", "blur", "both", "none".
data-zag-editable-select-on-focus-value	Boolean	true	Select text when editing starts.
data-zag-editable-max-length-value	Number	0	Max characters (0 = unlimited).
data-zag-editable-name-value	String	""	name for form submission.
data-zag-editable-disabled-value	Boolean	false	Disable editing.
data-zag-editable-read-only-value	Boolean	false	Read-only.
data-zag-editable-required-value	Boolean	false	Mark required.

Events

Emits zag-editable:change (while editing) and zag-editable:commit (on commit) — both { value }.

Programmatic control

value (getter), editing (getter), setValue(v), edit(), submit(), cancel().