Interactive Pop-Ups: Form Filling

Another common usage for interactive pop-ups is to enable users to fill out form elements. The example below shows an interactive pop-up containing various form elements. Selecting these form elements can navigate users to secondary views to fill out further information.

Interactive pop-ups can also be used for longer interaction sequences that guide the user through several views within a task flow. See the Task Flow page within the Navigation Patterns section for further details. For general guidelines on form filling, see the Form Filling section.

a1. Pop-up with form elements a2. Additional component
in a new layer

The initial view in the interactive pop-up can be freely constructed from form elements.

The view should contain a button to confirm and close the pop-up ("Done").

It is possible to use components that create additional layers above the pop-up (for example, List selectors and integer pickers).

When additional elements are shown above the popup, the user may tap anywhere outside the element to dismiss it.