Editable
Inline editable text that toggles between display and input mode on click or focus.
Examples
Basic Click-to-Edit
Click the text to enter edit mode. Press Enter to save.
Untitled project✎
With Placeholder
Shows placeholder text when the value is empty.
With Save / Cancel
Explicit Save and Cancel buttons instead of keyboard-only confirmation.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Editable } from "@rokle/components";import { Editable } from "@rokle/components";
export function Example() {
return <Editable />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Current text value. |
| onValueChange | (value: string) => void | - | Called when editing is committed. |
| placeholder | string | "Click to edit" | Placeholder shown when value is empty. |