Text Area

Text area lets users enter and edit multiline text.
Full keyboard navigation
Can be controlled and uncontrolled
Automatic integration with FormControl utility
Similar components:
Text Field


Usage

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

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.

In case you need to manually control the state of the field, you can use value property. That will give you full control of the component value and will stop handling the value automatically. You will have to update the state using onChange handler and will be able to add custom logic before that happens.

States

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 query.

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.

Accessibility

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.

Properties

NameTypeDefaultRequiredComment
namestring-true
idstring-falseCustom id override
disabledboolean-false
hasErrorboolean-false
placeholderstring-false
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
Previous