Content editable

New

Overview

Inline editing with slotted display content, an internal Phoenix form, native input or textarea controls, and save and cancel actions.

The component switches between read-only text and a native text input or textarea while editing. The native control is the Phoenix form field, so input changes, submissions, browser behavior, and validation errors use the normal form lifecycle without a hidden proxy.

Pass a field, set on_submit, and place the read-only display content inside the component. ContentEditable owns the form. Enter or the checkmark commits the input before the form submits; Escape or the X restores the value from when editing began.

HEEx

<ContentEditable.content_editable
  field={@form[:name]}
  label="project name"
  on_submit="save-project-name"
  class="text-lg font-semibold"
>
  {@form[:name].value}
</ContentEditable.content_editable>

Multiline content

Set as={:textarea} to preserve line breaks. Enter inserts a new line; Command+Enter on macOS or Control+Enter on other platforms saves.

HEEx

<ContentEditable.content_editable
  field={@form[:summary]}
  label="project summary"
  as={:textarea}
  on_submit="save-project-summary"
  class="max-w-md text-sm leading-6"
>
  {@form[:summary].value}
</ContentEditable.content_editable>

Errors

Errors from the bound field render beneath the editor and set aria-invalid and aria-describedby on the native form control. This example requires at least five characters.

HEEx

<ContentEditable.content_editable
  field={@form[:title]}
  label="project title"
  on_change="validate-project-title"
  on_submit="save-project-title"
  class="text-lg font-semibold"
>
  {@form[:title].value}
</ContentEditable.content_editable>

Accessibility

Each editor needs a concise label. The hook moves focus into the native input or textarea and restores it to the pencil after saving or cancelling. Every action has an accessible name, saved and discarded changes are announced, field errors are associated with the form control and announced when they change, and the global focus outline remains visible for every control.

Add this module

terminal

mix dizzy.add content_editable

Component API

ContentEditable.content_editable

Attributes

Attributes for ContentEditable.content_editable
Name	Type	Default	Values
`as`	`:atom`	:input	:input, :textarea
`class`	`:any`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	Required	—
`name`	`:string`	nil	—
`on_change`	`:string`	nil	—
`on_save`	`:any`	%Phoenix.LiveView.JS{ops: []}	—
`on_submit`	`:string`	Required	—
`rest`	`:global`	nil	—
`value`	`:any`	nil	—

Slots

Slots for ContentEditable.content_editable
Name	Required
`inner_block`	Required

JavaScript hook

DizzyContentEditable

Switches between slotted display content and a native input or textarea inside its own form, manages focus and keyboard commands, restores cancelled edits, and normalizes committed text before form submission and the optional on_save command.

mix dizzy.add includes the hook and performs any required asset setup automatically.