Editable Input Component
Click-to-edit input with keyboard shortcuts and programmatic control
Basic Usage
Simple Editable Text
Click the text above to start editing. Press Enter to save, Escape to cancel.
Styled Editable Input
This one uses badge styling for the label and colored input.
Programmatic Control
setText() & toggleEdit()
Direct Mode Control
Event Log
Event Log
No events yet...
Features Demonstrated:
- Click to edit - Click any text to start editing
- Keyboard shortcuts - Enter to save, Escape to cancel
- Auto-cancel - Click outside or blur to cancel
- Change events -
on:changefired when text changes
- setText() - Set text programmatically
- toggleEdit() - Toggle between view/edit modes
- beginEdit() / cancelEdit() - Direct mode control
- getText() / isEditing() - State inspection