Editable

Use Editable

Editable is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Editable } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Editable label="Project name" defaultValue="Flood workspace" name="project" />
    </FloodRoot>
  );
}

Design notes

• Preview and edit modes keep a separate draft. Enter commits and Escape cancels; IME composition does not submit.
• Use blurAction to commit, cancel or preserve the draft on outside focus. Moving focus to the save/cancel actions is internal to the editor.
• The host owns controlled value and editing props; callbacks request changes. The hidden named form field contains only the committed value.
• readOnly keeps a copyable field; disabled prevents editing. Localized action labels and inputRef are available. Introduced in 0.2.7.

API reference