When to use

Used for single-line or multi-line text inputs; enabled by the multiline option in UI Builder.

When to use

Used for single-line text inputs.

When to use

Used to allow a scalable, dynamic input box for multiple lines of text.

Length of field

• The maximum recommended width of a text field is 300 px; text fields wider than 300 px have reduced readability
• Consider the amount of text users will likely enter when setting a minimum / maximum character limit

Inset / outset borders

Like all input fields, a text field appears as an inset slot or box where the user can add text.
Editor uses accented borders to promote control differentiation and help users visually scan the UI faster.

1. Inset Borders are used with input groups, such as text fields, in or beneath the component surface.
2. Outset Borders are used with action groups, such as dropdowns, on top of the component surface.

Multiline behavior

• In the UI Toolkitframework a text field has unlimited length by default unless maxLength has been defined as any number other than 0
• In the IMGUI framework, a text field restricts their view to a standard dimension, causing content to scroll if it exceeds the element’s dimensions

Text fields with multi-line enabled in UI Toolkit(or text area in IMGUI) should be resizable, adapting to both the quantity of text they contain and user actions

Relative height

The recommended maximum size of a dynamic, scalable text field is relative to the other elements in the UI layout. A dynamic text field must not be so large that it displaces other UI layout elements, making them difficult to access.

Do

Text fields should adapt to the amount of text they contain and to user actions

Don't

Text fields should not be restricted in size when the windows layout permits scaling

Anatomy

Anatomy of a text field

A text field can contain and be paired with the following elements:
‍
1. Control label
2. View
3. Body (container)
‍

1. Control label
‍Labels should be placed to the left of the text field. Labels can also be placed above the field when necessary. Labels should be simple and clear, relating to the nature of content.
‍
2. View
‍The view of a text area is the space within the body where content is displayed. The view expands proportionately with the text area’s body until its size limit is reached, at which point it is used to display portions of the content inside.
‍
3. Body (container)
‍The body of a dynamic, scalable text box spans the width of the window it occupies, maintaining a thin margin on either side.

Layout and scaling

Outer margins and inner paddings of a text field.

When resizing a row with a text field horizontally, internal paddings and margins remain the same but the width of the body (container) scales to fit the new width.

Horizontal scaling a window with a text field, showing padding and margins maintaining their size

The body of a dynamic text box should also scale vertically to fit content, always maintaining the same lower margin between the lowest line of a text string and the edge of the content body.

Vertical scaling a window with a text field, showing padding and margins maintaining their size

Scrollbars and text fields

Consider using a scrollbar when a text field is vertically longer than nine lines.

Interaction states for text fields

Default
‍Text fields in the Default state are inactive but not disabled. Only a portion of the content entered may be visible. When empty, it will appear as a standard empty field. Text fields in the Default state will show any content entered as well as any controls generated to help navigate the content (such as Scrollbars).
‍
‍Hover
‍When hovering over a text field’s body the border will be highlighted. Additionally, the user’s default cursor will switch to a line cursor glyph to indicate the nature of the element.

‍Focused
‍When a text field enters the focused state its content will be highlighted in addition to its borders. This is because the content is being selected, allowing for the user to interact with it immediately (for example by immediately deleting or copying all of it).

‍Disabled
‍A text field that is disabled will indicate so by having its body “grayed out” and will not accept inputs or react to hovering.

Disabled state opacity

In the IMGUI framework, disabled states have 40% opacity by default.

1. text

2. input_field-border

3. input_field-background