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 Base UI 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.

Focused ring

Provide these CSS variables to sx prop to control the focused ring appearance:

• --Textarea-focusedInset: the focused ring's position, either inside(inset) or outside(var(--any, )) of the Textarea.
• --Textarea-focusedThickness: the size of the focused ring.
• --Textarea-focusedHighlight: the color of the focused ring.

Debugging the focus ring

To display the Textarea's focus ring by simulating user's focus, inspect the Textarea element and toggle the pseudostate panel.

• If you inspect the Textarea's root element, with .MuiTextarea-root class, you have to toggle on the :focus-within state.
• If you inspect the <input> element, you have to toggle on the :focus state.

Triggering the focus ring

To trigger the focus ring programmatically, set the CSS variable --Textarea-focused: 1.

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
  slotProps={{
    textarea: {
      id: 'unique-id',
    }
  }}
/>

Common examples

Focus outline

This example shows how to replace the default focus ring appearance with CSS outline.

Floating label

To create a floating label textarea, a custom component (combination of <textarea> and <label>) is required to replace the default textarea slot.

Underline input

Comment box

Unstyled

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Textarea />