TextArea

Use TextArea for multi-line input such as notes or comments. TextArea is used frequently within the context of a form, but there may be cases where it would exist independently. Placeholder text can be used to guide the user towards how to start their entry.

In order to give the user a hint about how long their response should be, set the initial size of the TextArea to the length of the response expected.

In the context of a FormField, apply resize="vertical" on the TextArea to ensure the TextArea doesn't expand beyond the width of the FormField it is contained in. In other contexts, the TextArea should be allowed to resize both vertically and horizontally.

In every case possible, TextArea should be used inside of a FormField to ensure that a label is appropriately paired with the input. This behavior is important to screen reader users who need to know what context the TextArea is referring to.

If you need to use TextArea outside of the context of a FormField, it is important to make sure the TextArea is labeled in an alternate way to meet accessibility requirements.

Placeholder text does not serve as a sufficient means of meeting accessibility requirements for labels. To meet accessbility requirements, placeholder text should be used in conjunction with a label or aria-labelledby attribute.

A TextArea's visual state informs the user of its ability to be interacted with or if any validation errors have occured.

Used to indicate that a TextArea does not meet the validation requirements of its bounding FormField. Click the Validate button while the TextArea is empty to see the validation state.

Used to indicate that a TextArea cannot be interacted with.