Editable

The Editable component shows preview text that switches to an input when you edit.

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 [email protected]