InlineEdit

InlineEdit is a single-line click-to-edit affordance. Use it for values that occasionally change in place (settings rows, table cells, header titles) where a full form would feel heavy.

#Default usage

<InlineEdit defaultValue="Untitled board" />

#Import

import { InlineEdit } from "@froggdesign/enter-ui-react";

#Controlled

<InlineEdit
  value={name}
  loading={saving}
  onSave={async (next) => {
    setSaving(true);
    try {
      await rename(next);
      setName(next);
    } finally {
      setSaving(false);
    }
  }}
/>

#Patterns

Return a string from validate to surface an inline error and block the save. Returning null / undefined keeps the value valid. Set multiline to render a textarea.

<InlineEdit
  defaultValue=""
  validate={(value) => (value.trim().length === 0 ? "Required" : null)}
  onSave={save}
/>

#Accessibility

When the field has no visible label, pass ariaLabel so screen readers can identify it. Errors are announced via role="alert". Keyboard: Enter commits (single-line) and triggers onSave, Escape discards the draft and exits edit mode, Tab behaves natively.

#API

• value, defaultValue, onSave, onCancel, placeholder, disabled, loading, validate, multiline, defaultEditing.
• ariaLabel, label, editLabel, saveLabel, cancelLabel.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.