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
Playground Coming Soon!
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.