Text Area

Text Areas allow users to enter larger portions of text, typically as part of a Form. Text Areas are used for collecting 2 or more lines of text. Text Areas are capable of collecting freeform text.


If the Text Area is required, you should pass the required prop. This will prevent any Form submission until the required Text Area is complete.


You may wish to disable a Text Area in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access.

Read only

If you want to render information that has already been entered for viewing purposes only, use the readOnly prop. The user will not be able to edit the Text Area if it is read only.

Sometimes you may want to add some styling to a Text Area component given the outcome of certain user actions. The color schemes for the following statuses can be controlled via components['form-field'] in the Theme. In Cosmos, a success status isn’t typically presented to the user because it is possible that the field will pass client-side validation but may fail when checking against server-side validation.