Text Area

Use the Text Area Component to let the user input long text data displayed in multiple lines and edit it. The Text Area allows the user to resize the area horizontally and vertically by a drag indicator. Users can achieve the Text Area Component by making an Ignite UI for Angular Input Group Component decorated as a text area.

Text Area Demo

Types

In Figma we offer a choice between text area with or without a hint, which can be switched on/off through the Hint boolean property.

With a hint	Without a hint

Interaction State

The Text Area can be switched from an enabled to disabled state from the Disabled boolean property.

Enabled	Disabled

State

When the user interacts with the Text Area, it goes through various states: Idle with a placeholder in the place of the content, Focused while the user is typing in it, and Filled once the user has finished adding content and moved on. These flexibility enhancements afford a more dynamic interaction design that can seamlessly flow into high-fidelity prototyping. In Figma, you can toggle between states using the State property in the right properties panel.

Idle	Focused	Filled

Every experienced designer uses constraints wisely to limit the user input and avoid invalid states, hence the availability of validation styles. Through the available validation styles, the Text Area is equipped for sophisticated designs that display Success, Warning, and Error visuals.

Success	Warn	Error

In Figma, states can be easily switched from the State property on the right properties panel.

Resizing

The Text Area lets the user resize the area horizontally and vertically by a drag indicator located in the bottom right corner while adjusting text automatically to fit the new constraints.

Styling

The Text Area comes with styling flexibility through the colors of its Background, Drag Indicator, Border, and Text. To change the validation styles, it is recommended to update the respective color styles in the Indigo.Design library.

Usage

When using the Text Area, you should always have a label. A text area without a label appears unclear.

Do	Don't