Input Data

Learn more about input data patterns

What is a data input 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.

Get started with our free tool for UI and UX design

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.

When you’re using HTML form input types, for instance, you can add input types using the input tag <input type=”INSERT TYPE HERE”>. Using these, you can create forms built on collecting different types of information from the user, which then allows the site or app to work from that data.

HTML/CSS/Javascript Input types

Input type: Checkbox

Checkboxes allow users to input data by clicking a box that indicates input for a single value (yes or no).

Input type: Date

CSS, Javascript, or HTML data input fields allow the user to enter a date in a form -- typically MM/DD/YYYY, but not time (though time and datetime-local input types can support that feature.

Input type: Button

These are simple push buttons that can be set to activate some kind of custom functionality on your app or web page (e.g. “Subscribe” “Add to favorites”).

Input type: Submit

Submit elements are a specific type of button that allows a user to submit form results that have been filled out.

Input type: File

These input types allow users to pick one or more files from their storage on their device for upload.

Input type: Images

You can use image input elements to make graphical submit buttons (see above), which can be customized by size, color, URL, alt text, and more.

Input type: Number

Number input types do exactly what they say on the tin -- allow users to input numbers in a form. They usually have built-in validation that rejects entries that aren’t numerical.

Input type: Email

This input type allows users to enter their email address; sometimes, you can add a multiple attribute to provide more than one, or an entire list of email addresses.

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!