Please note : This page is under construction. Additional content, including visuals examples, will be available soon.

Overview

A number of text-based fields exist in the Editor, differing on the type of information they allow. These fields are Alphanumeric in nature, though they can restrict the type (and specificity) of characters they accept. While some text-based fields allow for both numbers and letters to be input others restrict their inputs to numbers, sometimes further restricting those values to whole numbers.


Note

While there can be overlap in the types of inputs text-based fields allow it is important to use the correct field that restricts the user to inputs which are relevant for the intended purpose: While a Standard Field could be used on an interface for the positioning of an object any alphabetical characters will be seen as invalid inputs, making Numeric Fields a better fit.



Types

Of the text-based fields there are four main types; Standard fields (which accept all text inputs), Text Fields, Numeric Fields (which restrict the input to numbers), and Specialized fields (which structure or alter inputs).


Standard Field

Standard Fields allow all types of text-based input, including numbers, letters, and special characters. Standard fields are often used for inputs that do not involve specialized processes, such as assigning values. Instead, standard fields are used for displaying content.


Text String Field

While Text String Fields are technically a type of standard field (because they allow numeric and special characters too) their purpose is more specialized; they are meant to allow the user to view and edit text strings.

Depending on the usage of the Text-String Field the component can appear slightly different, however it maintains the same functionality and elements (a label and a field). The two most common Text-String Fields are the standard Text Field and the Text Area. These elements are used primarily for the input of text, either to be displayed to be assigned as a variable (tag, float, etc.).


Text Field

Text Fields are single-line input fields meant for displaying or assigning short text strings. These fields are used in situations where the user may need to view text assigned to a process or control objects through an association with that text, denoted by the field’s label. These elements can frequently be found assigning an object’s label or declaring a string that will be used in a process.


Text Area

Text Areas are an input field similar to Text Fields that allow users to input strings of characters for purposes like GUI, the key difference being in their ability to deform: Unlike Text Fields, Text Areas will rescale to fully show input text. Text Areas also differ in appearance, their label being placed directly above the field instead of to its left.

Text Areas are generally used for strings of text with the potential for a large volume of characters, such as text that relates to something displayed directly in the interface or other instances requiring a broader view of the content (such as paragraphs). 

Numeric Field

Numeric Fields allow for the displaying and altering of numeric values corresponding to an aspect of a process or subject; Vector Fields, for example, relate to the orientation of an object in space. Other numeric fields may relate to distance, variance, or quantity. By allowing the user to view and sometimes change such values a numeric field acts as both an informational display and a precision tool. A few of the types of numeric fields include; Vector Fields, Rectangle Fields (“Rect” fields), and Count Fields.

Within numeric fields there can be limits on input types through the API that restrict the possible inputs (for example fields that only accept integers or ones that permit decimals). These limitations are not displayed on the field itself but are enforced passively on the inputs received.



Heuristics

Readable. Fields should be identifiable, as should their purpose.

Responsive. The state of a field should be easily understood.

Legible. Text inputs should be clearly readable, along with cursor position.


General Guidelines

Appearance

All text-based fields are similar in appearance, deviating primarily in their dimensions, frequency in a template, and label placement.

Line Cursor

A Line Cursor (also known as a “caret”) should only appear when the input field is active and should flash to indicate the field is currently in focus.

As the user enters a text string the line cursor should position itself to the right of the last character entered. When editing a text string the line cursor should reposition to take the place of the last character in deleting. The line cursor should also reposition itself to the point of interaction if the user clicks somewhere in the string.