Please note : This page is under construction. Additional content, including visuals, code snippets, and layout information, will be available soon.


A Text Area is an input field which allows the user to input large volumes of text. Text Areas present the user with the option of entering large quantities of text without limiting their view of the content. These fields are dynamic; to help facilitate large volumes of text a Text Area presents the user with an input field that is scalable to adapt and display any amount of content being entered inside.


Responsive. A Text Area should scale with the volume of content to display as much as possible to the user.
Appropriate. A Text Area should appear in circumstances where a user may need to view and edit a large amount of content, enabling them to do so without significant struggle.

Unique. A user should be able to tell which element is a Text Area and which is a Text Field on sight.

General Guidelines

Text Areas should appear in situations where the user will need to enter large volumes of text, such as in writing messages.

Text Areas should be resizable, adapting to both the quantity of text they contain and user actions.

Text Areas should only restrict their size when they reach the maximum amount of space permissible within an interface. This is determined relative to other elements in the interface, displacing those elements until such a time as they would become difficult to reach.

Related Elements

Text Fields

Text Fields are similar to Text Areas, but are used in situations where short strings are preferable to large volumes of text. Text Fields restrict their view to a standard dimension, causing content to scroll if it exceeds the element’s dimensions. Text Fields are most commonly used for processes where a text string can be used to identify or assign an object, as seen in the name field of an object in the Inspector header.

Usage Guidelines

Text Areas are used for areas where a large string of text may need to be entered, allowing the user to view a significant portion of their input both during and after entering characters. They help cut down the need to actively navigate a text string with a line cursor and provide a scalable view for editing and review.

Style Guidelines

Like all Input Fields, a Text Area conveys its usage through the state of its body and content area. Text Areas have the appearance of an inset slot or box, a receptacle for the user to add content in.

Text Areas should appear with their label attached to the top of the content area and be visually distinct from other input fields, particularly Text Fields.


[Visual : Diagram of a Text Area]


Text Fields are labeled either above the field itself (left-aligned) or to the left of the field, depending on whether or not the interface contains multiple instances of the element. Labels should be simple and clear, relating to the nature of content.


The body of a Text Area spans the width of the window it occupies, maintaining a thin margin on either side.
This includes resizing, where the margins remain the same but the width of the content area scales to fit the new width.

The body of a Text Area 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.


Text Areas have five states; Default, Hover, Focused, Active, and Disabled. A Text Area can enter into any of these states regardless of whether or not it contains content, only being limited in the available actions the user can perform within the field or on the content itself.


When a Text Area is in its Default state it is inactive but not disabled. Depending on whether or not the Text Area is holding content the body may be scaled or appear as a standard empty field: Text Areas in the Default state will continue to show any content entered as well as any controls generated to help navigate said content (such as Scrollbars).


When hovering over a Text Area’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.


When a Text Area 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).


Text Areas in the Active state are indicated with a flashing Line Cursor unless text is actively being entered (at which point the characters entered will appear and the Line Cursor will move to accommodate them).


A Text Area that is disabled will indicate so by having its body “greyed out” and will not accept inputs or react to hovering.

Code Guidelines

Text Areas are used for situations where the volume of content produces a need for scalable visibility; as an element they are meant to provide users with an unobtrusive and adaptable means of viewing their input, scaling only as needed.



A Text Area will resize vertically to accommodate large volumes of text, scaling with each additional line that is generated when a string exceeds the field’s width.

A Text Area’s view  will scale to match the width of its window, increasing of decreasing proportionately.

There is a limit to the height of some Text Areas relating to how much of an interface they should be allowed to occupy; this limit stops the scaling of the Text Area in the interface and instead generates Scrollbars within the element, restricting the view but not the content.
If the Line Cursor moves beyond the content that is currently displayed within a Text Area the content will scroll so that the Line Cursor remains in view.\


All Text Areas have a size limit, either determined by the interface in which they appear or by virtue of the maximum size the window can achieve. When a text area hits its maximum dimensions a scroller is invoked within the content field to allow the continuation of text inputting. Users can navigate the view of the content through manipulating the scroller or by using the arrow keys, with the view scrolling automatically once an edge of the available view is hit.