Input Data

Learn more about input data patterns

What is an input data interaction?

In UI design, an input data pattern is a very useful interaction that allows users to enter information in one place – a form or login dialog box, for example – and have it automatically update elsewhere within the application. As simple as an input data interaction may appear, however, it is nonetheless one that has numerous practical uses in many real-world app design situations. Indeed you will likely want to make use of this pattern whenever it is necessary to pass data between two or more regions.

Also known as input synchronization, this type of two-way communication is usually achieved by means of a modal window. Modals are pop-up or dialog boxes which require that a certain action be carried out before normal use of the app can continue. As modals appear temporarily, and only when absolutely necessary, they permit greater functionality of a single page without occupying any extra space.

By adding an input synchronization pattern to a modal window you ensure that any time a user edits account information, this data is automatically passed to all relevant areas of the app. In this respect input sync is essential to the seamless functioning of any web or mobile application.

When to use an input data interaction?

Passing data from one place to another in an app or on a website is common when editing your profile. 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 on the main page of the app or website. To do this, you must ensure that user input is correctly displayed in both locations and synchronized automatically.

How to create an input data interaction in Framer

An input data interaction is a very practical pattern that will frequently prove useful when creating real-world products. 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. Now your input data interaction is ready to go!