Forms

Editable

Text that turns into a field when clicked: rename a project, a file, a title in place.

Ant Design: Typography editable

import { Editable } from '@alea/ui';

Examples

Click the text; Enter saves, Escape cancels. Names shorter than three letters are refused.

Text that turns into a field when clicked: rename in place (Chakra Editable, Ant Typography editable). Enter saves, Escape cancels.

Prop	Type	Default	Description
`label`required	`string`	-	What the text is, for screen readers ("Project name").
`className`	`string`	-
`defaultValue`	`string`	`''`	The text to start with.
`multiline`	`boolean`	-	A text area instead of one line.
`onSave`	`((value: string) => boolean \| void)`	-	Called with the new text when it is saved. Return false to refuse it (stays editing, marked invalid).
`placeholder`	`string`	`'Empty'`	Shown while empty.
`value`	`string`	-	The text (controlled).

The text is a button named "Label: value. Edit"; the field takes focus and selects the text.
A refused value keeps the field open and marked invalid; focus returns to the text after saving or cancelling.

Don't