Editable
Form ControlsStable
Inline editable text with preview and edit modes. Supports click, double-click, or focus activation and optional toolbar.
Quick Import
import { Editable } from "@cohere-ai/waypoint-ui/editable";Live Preview
Loading Editable...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled value |
defaultValue | string | '' | Default value |
onValueChange | function | - | Callback on value change |
editing | boolean | - | Controlled editing state |
defaultEditing | boolean | - | Default editing state |
onEditingChange | function | - | Callback on editing state change |
triggerMode | 'click' | 'dblclick' | 'focus' | 'click' | How to activate edit mode |
autosize | boolean | false | Input auto-sizes to content |
placeholder | string | - | Placeholder text |
disabled | boolean | - | Disables editing |
maxLength | number | - | Max character count |
Examples
Inline Editable
Click to edit inline text
1 import { Editable, EditableArea, EditablePreview, EditableInput } from '@cohere-ai/waypoint-ui/editable'; 2 3 <Editable defaultValue="Click to edit me"> 4 <EditableArea> 5 <EditablePreview /> 6 <EditableInput /> 7 </EditableArea> 8 </Editable>
Editable with Toolbar
Editable with save and cancel actions
1 import { 2 Editable, EditableArea, EditablePreview, EditableInput, 3 EditableToolbar, EditableSubmit, EditableCancel, 4 } from '@cohere-ai/waypoint-ui/editable'; 5 6 <Editable defaultValue="Editable with toolbar"> 7 <EditableArea> 8 <EditablePreview /> 9 <EditableInput /> 10 </EditableArea> 11 <EditableToolbar> 12 <EditableSubmit asChild> 13 <Button size="sm">Save</Button> 14 </EditableSubmit> 15 <EditableCancel asChild> 16 <Button size="sm" variant="ghost">Cancel</Button> 17 </EditableCancel> 18 </EditableToolbar> 19 </Editable>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Editable component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.