Text area

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

Same as when using native inputs in React, TextArea can be used as a controlled or uncontrolled component. By default, TextArea is uncontrolled and lets you define its default value using the defaultValue property. In this case, all change events are 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.

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

States

You can use hasError property to show the user that TextArea is not passing the form validation.

You can disable TextArea with the disabled flag. However, remember that disabling the field will remove it from the form submit query.

Using as a form control

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

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 a label - make sure to provide a text description. You can either provide the label by using the FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

Properties

Name
Type
onChange
({ event, name, value }) => {}
name
string
value
string
defaultValue
string
disabled
boolean
hasError
boolean
placeholder
string
id
string
className
Array<
string
undefined
null
false
>
attributes
object
inputAttributes
object
Previous