# Editable

Inline editing with explicit save/cancel and a committed form value.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `hideLabel` | `boolean` | `—` |
| `value` | `string` | `—` |
| `defaultValue` | `string` | `—` |
| `onValueChange` | `(value: string) => void` | `—` |
| `editing` | `boolean` | `—` |
| `defaultEditing` | `boolean` | `—` |
| `onEditingChange` | `(editing: boolean) => void` | `—` |
| `onCommit` | `(value: string) => void` | `—` |
| `onCancel` | `() => void` | `—` |
| `blurAction` | `"commit" \| "cancel" \| "none"` | `"commit"` |
| `readOnly` | `boolean` | `—` |
| `disabled` | `boolean` | `—` |
| `placeholder` | `string` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
| `showActions` | `boolean` | `true` |
| `editLabel` | `string` | `—` |
| `saveLabel` | `string` | `—` |
| `cancelLabel` | `string` | `—` |
| `inputRef` | `Ref<HTMLInputElement>` | `—` |
| `name` | `string` | `—` |
| `form` | `string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" \| "onChange" \| "children">` | `Forwarded` |