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 of text areas include comment fields, and other scenarios requiring long plain text values.
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.
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.
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.
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).
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.
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.