Text Area is the text field that users fill in with free alphanumeric text. Usually it is used to write medium to long texts, such as answers, long explanations or letters.
It should also be noted that Text Area it is a molecule because always is combined with other atoms like Label, Placeholder or HelpText.
Definition metadata
Status of definition
WIP
Definition version number
2.0
Category
Molecule
Last Changelog update
30/08/2018(see details at the Changelog section)
This component almost always it works with Label & Placeholder atoms and usually it is combined with other atoms like HelpText or Buttons.
Text Area, by default, have a length that is auto-adjustable to the content written by the user(according to the page grid).
As an optional feature it can have an“auto-expandable” function at the right bottom corner, to resize it manually. It is recommendable to use the browser’s native one.
If the text written by the user is longer than the visible area(the box of the text area), then the scroll bar appears.
Text Area field combined with Label, Placeholder and HelpText atoms.
Behavior
States
TextArea have the 3 basic states: default, focused and disabled.
Should be noted that Placeholder atom disappear when the Input is on focus status. This behavior helps the user understand that the field is ready to write on it.
For the first iteration, the focus will be the native browser focus.
Text area states combined with Label and Placeholder atoms.
Scroll & resize
There are 2 possibilities of default size. We will measure it by the number of text lines.
Options to choose:
Short: 5 text lines high
Long: 7 text lines high
Once the user writes more text lines than the lines shown by default, the scroll function will start to work, including the right side scroll bar.
On the other hand, as seen under Structure, an optional(and recommended)“auto-expandable” function can be added to let the user modify the text area size manually.
The“auto-expand” can modify the height and length, but it is recommended only to modify the height(for the grid adjustment and to make it easier for the user).
Here we can see the moment where the“auto-expand” and the scroll function are working.
Content
We recommend to always use a Placeholder atom that indicates what users are being asked.
Remember, Text Area field can be combined with HelpText
Visual
Here it is showed only the Input measures.
To see the margins between Input field and other atoms like Label, Placeholder or HelpText, please check those components.
Remember, the Scrollbar and Resize grabber will be the browser’s default one.
Text area with Label, Placeholder and HelpText atoms.
Definition metadata
Structure
Behavior
States
Scroll & resize
Content
Visual