Text Area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Sizes

Control the size of a textarea by setting the size property to small, medium or large. By default, the textarea has size medium.

<Textarea size="small" textareaProps={{ placeholder: "Small" }} />
<Textarea size="medium" textareaProps={{ placeholder: "Medium" }} />
<Textarea size="large" textareaProps={{ placeholder: "Large" }} />

You can place textarea element inside a form field

Label

This is a help text

Label

This is a help text

Label

This is a help text

<FormField>
  <FormLabel htmlFor="textarea-small" size="small">
    <span>Label</span>
  </FormLabel>
  <Textarea
    size="small"
    textareaProps={{ id: "textarea-small", placeholder: "Small" }}
  />
  <FormCaption size="small">This is a help text</FormCaption>
</FormField>

Disabled

Set disabled property to true to disable the component.

<Textarea textareaProps={{ placeholder: "Disabled" }} disabled />

Resize

Text areas can either be a fixed size or can be resizable with a drag icon in the bottom right corner. By default, the drag icon should be hidden and the text area should not be resizable. You can set the resize property to true to enable the drag icon.

<Textarea
  textareaProps={{ placeholder: "Textarea should be resizable" }}
  resize
/>

Severity

Error

Set the property severity to error in the component to change textarea border color and icon in error severity.

error

<Textarea
  severity="error"
  textareaProps={{ placeholder: "Enter at least one interest." }}
/>

Warning

Set the property severity to warning in the component to change textarea border color and icon in warning severity.

warning

<Textarea
  severity="warning"
  textareaProps={{ placeholder: "Enter at least one interest." }}
/>

Success

Set the property severity to success in the component to change icon in success severity.

check_circle

<Textarea
  severity="success"
  textareaProps={{ placeholder: "Enter at least one interest." }}
/>

<textarea> attributes

You can apply any standard <textarea> attributes (e.g., placeholder, maxlength etc.) to the inner <textarea> of the Text Area component by using the textareaProps prop.

Default value

<Textarea
  textareaProps={{
    defaultValue: "Default value",
    placeholder: "Textarea",
    maxLength: 30,
    onInput: (event) => {
      console.log('onInput from textareaProps:', event.target.value);
    }
  }}
/>

API

The Textarea component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, Textarea doesn't accept any children.

Loading API documentation...