Input Data

Learn more about passing input data

Passing data from one place to another in an app or website is common when editing your profile or account information. Imagine you need to change your email address as part of your account information, when you make the change in the account settings it also needs to change in the main page of the app or website. To do this, you need to ensure that the user input is correctly displayed in two locations and updated accordingly.

Creating this effect in Framer

In Framer we can recreate this interaction by using the input component. The Input package comes with an onValueChange prop, which allows you to get the value of the input and update information accordingly. You can edit user information in an ‘edit info’ model when previewing and have the data save and appear in the main screen. This is a very practical and useful example interaction for creating real products.