Use text areas to let users enter longer plain text. The text area can be expanded in height.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Text Area |
Allow users to provide information. They typically appear in forms and modals. |
--- |
The user needs to add information. Some of these inputs are mandatory. |
Anatomy
Structure
|
|
|
label |
Indicates the type of information the text area requires. |
|
required |
Indicates that the text area field is required. |
|
placeholder |
Clarifies how users should use the area, for example, "Add a message here". |
|
counter |
Counts the number of characters provided by the user and stops at the limit. |
|
resize |
Resizes the box where the user enters the information. |
Sizes and spaces
|
The width of the element is flexible and they can vary accordingly with the need and the context.
Paddings and margins should be respected. |
Properties
Properties
|
Property |
Values |
|---|---|
|
State |
default active filled disabled read-only |
|
Counter |
true false |
|
Window Resize |
true false |