opinion
Editable
Text that turns into an input when you click it. Enter saves, Escape reverts.
Project nameClick to edit
In context
Project headerRename the project and its tasks in place
On track
PNResearch
MCDesign
MCDesign
MCDesign
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | string | undefined | No | — |
defaultValue | string | undefined | No | |
onChange | ((value: string) => void) | undefined | No | — |
onSubmit | ((value: string) => void) | undefined | No | — |
placeholder | string | undefined | No | — |
aria-label | string | undefined | No | — |
disabled | boolean | undefined | No | — |
className | string | undefined | No | — |
showEnterHint | boolean | undefined | No | true |
Accessibility
The read-mode display is a real, focusable, keyboard-activatable <button> (Enter/Space enters edit mode) — never a bare <span onClick> that only a mouse or a screen-reader's click-simulation could reach.
data-rebar-* attributes
data-rebar-component="editable"; data-rebar-part is "display" (read mode), "input-wrapper"/"input" (edit mode), or "enter-hint" (the Enter-to-save glyph, when shown).
Migrating to Ant Design
Not codemod-covered — AntD has no direct equivalent; Typography.Text editable is the closest, but its callback shape and edit-trigger prop differ enough to need a hand rewrite.