Text Area
Text area lets users enter and edit multiline text.


All form fields have a required name property, so that's the only property you have to pass to TextArea to start using it. If you need to handle its change events - add an onChange property to it.

Controlled/uncontrolled value

Like when using native inputs in React, TextArea can be used as controlled or uncontrolled component. By default, TextArea is uncontrolled and lets you define its default value using defaultValue property. In this case all change events will be handled automatically. This approach is helpful when you're pre-filling a form from a data source but you don't need to control the further behavior of the input.

However, it's not possible to control the input value with your product code when using an uncontrolled component. To solve this, React provides a way to define component as controlled and use value property instead. That will give you full control of the component value and will stop handling the value automatically. Therefore, you will have to update it manually using onChange handler.


When a field status has to be highlighted, hasError property can be used to guide the user.

TextArea can be disabled with disabled flag. Keep in mind, that disabling the field will remove it from the form submit url by default.

Using as a form control

To let user know what data you expect them to type in, add labels or status messages to your fields with the help of FormControl utility. Adding a placeholder should help even further by defining the format of data used in the field.

Note: Don't use placeholders as labels for the fields as users won't see the placeholder when input contains a value.


When using TextArea without label - make sure to provide a text description for it. You can either provide the label by using FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.


idstring-falseCustom id override
valueboolean-falseControlled value
defaultValueboolean-falseUncontrolled value
onChange({ name, value, event }) => {}-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
inputAttributesobject-falseAttributes for the input element