Textarea

Textarea component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

Introduction

Joy UI's textarea component is built on top of the MUI Base TextareaAutoSize component.

Component

After installation, you can start building with this component using the following basic elements:

import Textarea from '@mui/joy/Textarea';

export default function MyApp() {
  return <Textarea placeholder="Type anything…" />;
}

Variants

The textarea component supports the four global variants: solid (default), soft, outlined, and plain.

Sizes

The textarea component comes with three sizes out of the box: sm, md (the default), and lg.

Colors

Toggle the palette that's being used to color the by text field by using the color prop.

Form props

Standard form attributes are supported e.g. required, disabled, etc.

Validation

To toggle the error state, use the error prop.

Note that using the color prop with danger as value gets the same result:

<Textarea color="danger" />

Rows

Use the minRows to set the minimum number of lines to show and maxRows to limit the number of lines that users will see.

Decorators

Use the startDecorator and/or endDecorator props to add supporting icons or elements to the textarea. It's usually more common to see textarea components using decorators at the top and bottom.

Accessibility

In order for the textarea to be accessible, it should be linked to a label.

The FormControl automatically generates a unique id that links the textarea with the FormLabel component:

Alternatively, you can do it manually by targeting the textarea slot:

<label htmlFor="unique-id">Label</label>
<Textarea
  componentsProps={{
    textarea: {
      id: 'unique-id',
    }
  }}
/>

Common examples

Comment box

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.