Nav open / close arrow

Styles

Using this Component

Text areas enable users to input multi-line text values. Use text areas where a flexible typed input longer than 50 characters is required.


Applications

Applications of text areas include comment fields, and other scenarios requiring long plain text values.


Labels

Text areas have a built in label prop. To provide more context to the input task being presented to the user, the text box can be used beneath a UIHeader and descriptive text block.


Alternatives

For input values shorter than a single line, use UITextBox. For situations where rich text is required, use UIRichTextEditor.

Structure

1. Label

All text areas allow for a label of the text input area. When inactive and empty, this label is placed at the top of the text input area. When active or filled, the label appears directly above the input text.

2. Text Input Area

The text input area is the interactive area that allows a user to enter text. When inactive and empty, the text area label displays at the top of this space.

3. Text Input Border

The underline of the text input area visually indicates the height of the interactive area, as well as the current state of the text box.

4. Helper / Placeholder Text

Helper text is displayed beneath the text input area.


Size

The height and width of a text area are determined during implementation. Width is set as a number of standard character widths, and height is set with number of rows of text.

Behavior

Text areas are directly interactive elements that visually reflect their current state using label placement, and color (of the text input border and/or helper text).


Typing

When active, users can type any text into the text area, and the value displayed will reflect their input.


Truncation & Overflow

The visible of a text area is limited to a set number of rows. If the value exceeds what can be displayed on screen, the text will display a truncated value. The truncated value can be navigated using the arrow keys when the type cursor is active in the text area.

Related Components

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code