Textarea

Textarea is a form component that allows the user to enter a sizeable amount of multi-line plain text.

Import

import { Textarea } from '@contentful/f36-components';
// or
import { Textarea } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the Textarea as a controlled input, you need to:

  • Pass value property, with this property it will already be a controlled component;
  • Pass onChange handler, so you can use it to update the value of the input;

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the Textarea as an uncontrolled input, for that you can:

  • Set the defaultValue property, it will ensure that the initial value of the input is set.
  • Don't set the value as it will make the input controlled.

Using outside of forms

When Textarea is used outside of form (without FormControl) and has no <label> associated with it, you need to specify aria-label.

Different states

Accessibility

  • To ensure Textarea meets accessibility keyboard standards, set the name and id properties.
  • If you are using this component in a form, provide validation to the input and use isInvalid to control the error state of Textarea.
  • The invalid and disabled states do not need to be set on FormControl but can be set in Textarea.
  • In case the input is required, use isRequired prop.
  • To display meaningful error messages make use of <FormControl.ValidationMessage>. For further details refer to FormControl.

Props (API reference)

Open in Storybook

This component also accepts relevant HTML attributes as props. These include rows, autoFocus and autoComplete.

Name

Type

Default

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

defaultValue
string

Set's default value for textarea

icon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components

id
string

Sets the id of the input

isDisabled
false
true

Applies disabled styles

false
isInvalid
false
true

Applies invalid styles

false
isReadOnly
false
true

Applies read-only styles

false
isRequired
false
true

Validate the input

false
name
string

Set the name of the input

onBlur
FocusEventHandler<HTMLTextAreaElement | HTMLInputElement>

Allows to listen to an event when an element loses focus

onChange
ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>

Allows to listen to an input’s change in value

onFocus
FocusEventHandler<HTMLTextAreaElement | HTMLInputElement>

Allows to listen to an event when an element get focused

onKeyDown
KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>

Allows to listen to an event when a key is pressed

resize
"none"
"both"
"horizontal"
"vertical"

Sets whether an element is resizable, and if so, in which directions

vertical
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-textarea
value
string

Set the value of the input

willBlurOnEsc
false
true

Boolean property that allows to blur on escape

true