Text input fields are used to create areas for users to enter text within your prototype. These fields can also be animated within the prototype - the same way elements animate.

There are five types of input you can choose from:

  • Text
  • Passwords
  • Numbers
  • Email
  • Telephone

Creating and customizing a text input 

To create a text input, select the text input tool or press F. In the properties panel you’ll see a new panel appear under ‘Input’.

There are three variables you can use to ensure the text fields are appropriate for your prototype:

  • Type: Type of input type the field will accept (text, password, number, email, or telephone). The input type dictates which keyboard is shown on mobile previews.
  • Inset: Distance of text from the left and right borders of the field.
  • Content: You can choose whether to pull the content from a data source or link it to a variable
  • Hint: Specified placeholder text.

Inputs fields can be made visible, but not able to be edited by selecting the 'disabled' box.

They can also be customized via the appearance panel and used during mobile preview.

Fields can be navigated to in Preview mode via clicking on them, or by pressing 'tab'. Note that tab will follow the order of the input field layers from top the to bottom of the panel.

Recommended Reading: Using input fields in user testing

Next →  
GIFs and multimedia files

Related articles:

Did this answer your question?