Editable

Inline click-to-edit text — a preview that becomes an input in place, for titles, labels and notes.

$bunx shadcn@latest add @nx-ui/editable

Installs withbuttonutils

Click the title to rename in place. Enter commits, Escape reverts.

Renaming updates the scope header across the project workspace.

showActions renders confirm / cancel controls beside the field — handy on touch, where blur is fiddly.

Site reference

Textarea mode for longer notes — new lines with Enter, commit with Cmd/Ctrl+Enter or the confirm button.

Gate-fee note

activateOnDoubleClick keeps a single click inert — useful in dense tables where rows are also selectable.

An empty value shows muted placeholder text until the field is filled in.

API reference

Exported parts and their props, extracted from the component source.

Prop	Type	Default	Description
`value`	`string`	—	Controlled text value.
`defaultValue`	`string`	`""`	Uncontrolled initial text value.
`onValueChange`	`(value: string) => void`	—	—
`onSubmit`	`(value: string) => void`	—	Fired with the committed value on Enter / blur / confirm.
`onCancel`	`() => void`	—	Fired when editing is abandoned via Escape / cancel.
`editing`	`boolean`	—	Controlled editing state.
`defaultEditing`	`boolean`	`false`	—
`onEditingChange`	`(editing: boolean) => void`	—	—
`placeholder`	`string`	`"Enter text…"`	—
`submitOnBlur`	`boolean`	`true`	Commit (rather than cancel) when the field loses focus. Default true.
`maxLength`	`number`	—	—
`textarea`	`boolean`	`false`	Multi-line mode: renders a textarea (Cmd/Ctrl+Enter commits).
`disabled`	`boolean`	`false`	—
`activateOnDoubleClick`	`boolean`	`false`	Require a double-click to enter edit mode (single click otherwise).
`showActions`	`boolean`	`false`	Show confirm / cancel action buttons beside the field.
`previewClassName`	`string`	—	—
`inputClassName`	`string`	—	—
`name`	`string`	—	—

…extends Omit< React.ComponentProps<"div">, "onSubmit" | "defaultVal…