Atomic currently supports three types of form elements: text inputs, text areas and dropdown menus. Form elements let you capture input from users, and can be linked to variables in order to achieve form validation and other complex manipulation using script expressions. Form elements can also be animated, the same way other elements are animated.

Form elements can be styled and become interactive when previewed. Fields can be navigated to in Preview mode via clicking on them, or by pressing the 'Tab' key. Note that tabbing will follow the reverse order of fields as they appear in the Layers panel (from bottom to top).
 

Text Inputs

Text inputs are single-line fields that can be used to present text and capture text and entered by users. The text within them can be populated from a data source or a variable. When text inputs are interacted with they emit events that you can set up actions to listen and respond to. 

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 an ‘Input’ section with customisation options.

Text inputs have five settings you can use to customise their appearance and behaviour:

  • Type: The type of input the field will accept: Text, Password, Number, Email, or Telephone. The input type dictates which keyboard is shown on mobile devices, and restricts what types of characters can be entered.
  • Inset: The left and right padding (or distance) of the text from the input’s edges
  • Content: You can choose whether to pull the content from a data source or link it to a variable
  • Hint: Default placeholder text
  • Disabled: Prevents user input

Text Areas

Text areas are multi-line fields that can be used to present text and capture text and entered by users, include text that contains multiple paragraphs. Like text inputs, the text within them can be populated from a data source or a variable. When text area are interacted with they emit events that you can set up actions to listen and respond to. 

Text areas have four settings you can use to customise their appearance and behaviour:

  • Inset: The left and right padding (or distance) of the text from the input’s edges
  • Content: You can choose whether to pull the content from a data source or link it to a variable
  • Hint: Customizable default placeholder text.
  • Disabled: Prevents user input. 

Text input and text area events

You can add actions to text input and text area elements to respond to when a user interacts with them:

  • Focus: triggered when a user clicks into and activates a field
  • Blur: triggered when a user clicks outside of or tabs away from a field, meaning it is no longer active
  • Keypress: triggered when a user types into a field 

Dropdown Menus

Dropdown menus let users select from a predefined set of options. The selected option can be populated from a data source or a variable.

Dropdown menus have three settings you can use to customise their appearance and behaviour:

  • Options: Lets you define the list of options the user will have to choose from. Enter options on separate lines using a carriage return.
  • Set to: Defines what option should be selected by default. The selected value can be set from a data source or variable.
  • Disabled: Prevents user input. 

Defining dropdown menu options

Options can be defined in two ways: labels only, or values and labels. 

Labels only
The options provided will appear in the list of options presented to the user and become the value of the dropdown once selected. For example:

  • One
  • Two
  • Three

Values and labels
Lets you separately define what is shown to the user (the label) and the value which is set when an option is selected (the value), which is accessible via scripting when the dropdown menu is linked to a variable. For example:

  • 1, One
  • 2, Two
  • 3, Three

Form validation using variables

You can link a form element to a variable so that a variable's value will be kept continuously in sync with what is displayed in the form element. Linking a variable affects it in two ways: when a variable is updated the text displayed in the form element will be updated, and when a user changes the value in a form element the variable will be updated. Having form element values stored in variables lets you perform form validation using script expressions.

To link a variable to a text input or text area field, set the "Content" to "Use Variable" and select the variable you would like to use.

To link a variable to a dropdown menu, set the "Set To" property to "Use Variable" and select the variable you would like to use.

Recommended reading: Using input fields in user testing

Did this answer your question?