revido kit
Start building
← All components
forms / stable

EditableTitle

Inline record title — always-on input or click-to-edit for peek headers.

LIVE PREVIEW
Loading preview…

When to use

  • Record names in peek / sheet headers.
  • Create forms where the name is the primary field.

Consider an alternative

  • Ordinary form fields — use TextField.
  • Read-only titles — use a plain heading.

Import

import { EditableTitle } from '@revido-llc/kit';

Keyboard interaction

  • Enter — commit (blur) in click-to-edit
  • Escape — cancel edit mode in click-to-edit

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

onChange (required)(value: string) => void—
value (required)string—
aria-labelstring—Accessible name when the visible value is empty.
autoFocusboolean—
classNamestring—
disabledboolean—
inputRefRef<HTMLTextAreaElement>—Optional external ref to the textarea.
modeEditableTitleMode"clickToEdit"Always-visible input, or click-to-edit (shows a button until activated).
onBlur(() => void)—
onKeyDown((event: KeyboardEvent<HTMLTextAreaElement>) => void)—
placeholderstring"Name…"

Examples

Click to edit

<EditableTitle mode="clickToEdit" value={name} onChange={setName} />

Always input

<EditableTitle mode="input" value={name} onChange={setName} autoFocus />

Related components