Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Input UI elements for your prototypes


In this tutorial, you will learn about the different types of input widgets (UI elements) available for you to use in your interactive prototypes.

With input UI elements, the user can insert data into an application. They are mainly used to create input forms. Text boxes are the most common input UI element type, but there are several others, including check boxes and radio buttons. The value of input widgets can be modified by the user through interaction during simulation. However, this can disabled by unchecking the ‘Editable’ property type in the Properties panel.

Input Text Field

The Input Text Field widget is a UI element that holds text as a value.

input-field-widget-interactive-prototypes

This widget has six different styles that can be modified in the Properties panel under ‘Type‘:

  • Text: a text box with a single line.
  • Text Area: a text box that can hold several lines of text with automatic vertical and horizontal scroll bars.
  • Password: a text box with a single line that when typed into, will hide the text to simulate a password.
  • Number: a text box with a single line that when typed into, will only accept numbers when simulation happens on a mobile device only
  • Email: a text box with a single line that when typed into on a mobile device, the keyboard that appears will include the ‘@’ symbol.
  • URL: a text box with a single line that when typed into on a mobile device, the keyboard that appears will include the ‘.com’ symbol.

You just need to drag it onto the canvas and click ‘Simulate’ to be able to enter text in it as if it were a real input text field.

Interactive wireframe components

Editing the default text

You can choose from of the options below:

  • Double-click on a Text widget to edit the text inside the widget. Make the desired changes to the text. To apply the changes press ‘Enter‘ or simply click outside the widget. To cancel the edit without applying changes click ‘Esc‘.
  • Select the Text widget and change its default text in the Properties panel.

Editing text during simulation

To change the text of a Text widget upon simulation, click on the widget to start editing. Make your changes. Then, press ‘Enter‘, or click outside the widget to apply the changes, or click ‘Esc‘ to cancel.

Important: Text widgets are editable during simulation only if they have the ‘editable’ property enabled in the Properties panel.

Check Box

The Check Box widget is a UI element that must represent two different and opposed states: e.g true (checked) or false (unchecked).

input-check-box-widget-interactive-prototypes

Editing the default value

You can choose from of the options below:

  • Double-click on the Check Box widget to change its state.
  • Select the Check Box widget and change its default state in the Properties panel.

Editing value during simulation

To change the value of a Check Box widget upon simulation, click on the widget to change its value.

Radio Button

Like the Check Box widget, the Radio Button must also represent two different and opposed states: e.g true (checked) or false (unchecked). However, unlike Check Boxes, Radio Buttons cannot change their value through direct interaction during simulation, once checked. Events must be used to change a Radio Button’s state to unchecked as they usually work together with other Radio Buttons. Edit the Radio Button’s value in the same way as with the Check Box.

input-radio-button-widget-interactive-prototypes

Date & Time Input

The Date widget is a text box that is usually used to represent dates and time in standard format. The Date widget appears as an input box with a calendar or watch icon next to it. This is used to easily edit its value. The Date widget has two different styles which can be changed in the Properties panel:

  • Date: A text box that prompts the user for a date in the format MM/DD/YYYY.
  • Date and Time: A text box that prompts the user for a date and time in the format MM/DD/YYYY HH:mm.

input-date-widget-interactive-prototypes

Editing the default value

To edit the value of the Date widget, double-click on the calendar or watch icon on the right-hand side of the widget. A dialog with a calendar will appear. Select the desired date or date and time and click OK. Cancel the dialog to stop editing without applying changes. Upon simulation, click on the icon to start editing.

input-calendar-widget-interactive-prototypes

File Upload

The File Upload widget is a single line text box used to indicate a path to one specific file in the file system. It appears as an input box with a ‘Browse‘ button used to browse a file in your file system. The text held within this widget cannot be changed directly.

input-file-upload-widget-interactive-prototypes

Editing value during simulation

To edit the value of the File Upload widget, click on the ‘Browse‘ button. Browse for the desired file in the system dialog. Select ‘Open‘ to use the path to the file selected or ‘Cancel‘ to close the dialog without applying changes.

List Box

The List Box widget displays a list of ordered values. When one of its values is selected all the others remain un-selected. To set one of its values selected by default, double-click on the desired value, or change the default selected value through the attribute ‘Value‘ in the Properties panel.

input-list-box-widget-interactive-prototypes

Editing value during simulation

Select a value from the List Box widget upon simulation by clicking on the desired value.

Select List

The Select List is a basic drop-down widgets that contains a list of ordered values, displayed depending on the device that is simulating the prototype. For instance, Android will display real drop-down menus. You can set the value of the Select List in the Properties tab, by clicking on ‘Edit values’. When you click ‘Simulate’, you’ll be able to interact with it in your wireframe.

input-select-list-widget-interactive-prototypes

Custom Select List

The Custom Select List is similar to the select list but includes all style configuration properties as in other widgets. This widget will be displayed in the same wau across devices.

Setting default selection

To set one of its values as default:

  • Click on the Selection List widget.
  • Click again to open the drop-down and select the desired value.

Selecting value during simulation

Select a value of a Selection List while simulating by clicking once on the widget to open the drop-down. Then select the desired value or write another one like a common text input.

input-custom-select-list-widget-interactive-prototypes

Multi-select

The multi-select widget is a multiple text line widget that displays a list of ordered values like a List Box widget.

input-multi-select-widget-interactive-prototypes

Setting default selection

To set a selected value by default, double-click on the desired value. Select as many values as desired. Double-click on one of the selected values to deselect it. You can also change the default selection through the attribute ‘Value’ in the Properties panel.

Selecting value during simulation

Select a value of a multi-selection List during simulation by clicking on the desired value. Click on a selected value to deselect it.

Radio List

The radio list is a selection widget that displays a list of ordered values together with a radio button for each value.

input-radio-list-widget-interactive-prototypes

This single selection widget behaves like a List Box but the values must be selected with radio buttons. Radio Button Lists have two different value display styles:

  • Vertical: Values display in multiple lines vertically.
  • Horizontal: Values display in a single text line with the values next to each other.

Change the orientation of this widget with the attribute ‘Orientation’ in the Properties panel.

Setting default selection

To set a selected value by default, double-click on the desired value. Double-click on one of the selected values to deselect it. You can also change the default selection through the attribute ‘Value’ in the Properties panel.

Selecting value durig simulation

Select a value of a Radio Button List during simulation by clicking on the desired value.

Check List

The Check List is a selection widget that displays a list of ordered values together with a check box for each value. This multi-selection widget behaves like a Multi-selection List but the values must be selected through check boxes. Check Box Lists have two different styles to display their values: Vertical and Horizontal (See Radio List above).

input-check-list-widget-interactive-prototypes

Setting default selection

To set a selected value by default, double-click on the desired value. Select as many values as you need. Double-click on one of the selected values to deselect it. You can also change the default selection through the attribute ‘Value’ in the Properties panel.

Selecting values during simulation

Select a value of a Check Box List during simulation by clicking on the desired value. Click on a selected value to deselect it.


Input widgets in Data-driven prototyping

Input widgets display a list of text values that come from the following data sources:

  • Fixed Values: A user defined list of fixed values.
  • Data Master Field: A list of category values coming from a Data Master field of type Category or Multicategory.
  • Data Master: A list of all the Data Master instances using commas as a field separator.

When an Input widget is added to the canvas, it shows a list of fixed values. To change the data source of an Input widget, select the widget on the page and click on ‘Edit values’ below ‘Value’ in the Properties panel. Select the data source Fixed Values, Data Master Field or Data Master in the dialog. Note that you first need to create a Data Master in order to use it (or its fields) as a data source. Users can select one (single selection) or more (multi-selection).

Editing fixed values

  1. Select the widget and click on ‘Edit value’ in the Properties panel, below the ‘Value’ attribute. A dialog will appear.
  2. Click on the radio button Fixed Values.
  3. Edit the fixed values through the editor on the right.

Getting values from a Data Master Field

  1. Select the widget and click on ‘Edit values’ in the Properties panel, below the ‘Value’ attribute. A dialog will appear.
  2. Click on the radio button Data Master Field. Note that this option will be only enabled if there is any Data Master with Category or Multi-category fields.
  3. Select the field you want to use on the list.

Getting values from a Data Master

  1. Select the widget and click on ‘Edit values’ in the Properties panel, below the ‘Value’ attribute. A dialog will appear.
  2. Click on the radio button Data Master. Note that this option will only be enabled if there is any Data Master created.
  3. Select the Data Master you want to use on the list.

Next tutorial > Navigation UI widgets for wireframing