Editable
The Editable component shows preview text that switches to an input when you edit. Every interaction, activating edit mode, typing, saving, and canceling is handled with built-in accessibility, so it works well for all users.
Key features
Compatible with Framer native forms
Built-in accessibility for readable, usable interactions
Works on desktop and mobile
Single-line inline editing with preview and input modes
Icon triggers for Edit, Save, and Cancel
Activation by focus, click, double-click, or programmatic control
Submit on Enter, blur, both, or via the Save button
Separate styling for preview (read-only text) and input (edit mode)
Highly customizable: fonts, colors, borders, radii, padding, and more in Framer
Keyboard support: Enter to save, Escape to cancel
Ideal for
Inline editing in tables and lists
User profiles and settings
CMS-style content editing
Any flow that needs quick single-line edits without a separate form
License
Your Pro License includes:
Single user license
Use on unlimited sites
Use for unlimited clients
Restrictions: Not for resale or sharing in component libraries or templates. Contact me for custom license plans.
Support
Contact me at info@netoum.com
Netoum
