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