Textarea

A native textarea element that automatically works with Field.

import * as React from 'react';
import { Textarea } from '@base-ui-components/react/textarea';
import styles from './index.module.css';

export default function ExampleTextarea() {
  return <Textarea placeholder="Type something…" className={styles.Textarea} />;
}

Anatomy

Import the component and use it as a single part:

Anatomy

import { Textarea } from '@base-ui-components/react/textarea';

<Textarea />

API reference

defaultValue

Union

—

Name: defaultValue
Type: string | number | string[] | undefined

onValueChange

function

—

Name: onValueChange
Description: Callback fired when the value changes. Use when controlled.
Type: | (( value: string, eventDetails: Textarea.ChangeEventDetails, ) => void) | undefined

maxRows

number

—

Name: maxRows
Description: Limit automatic height resizing to this many rows.
Type: number | undefined

minRows

number

—

Name: minRows
Description: Enable automatic height resizing by setting the minimum number of rows.
Type: number | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: string | ((state: Field.Root.State) => string)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Field.Root.State, ) => ReactElement)

data-disabled

Present when the textarea is disabled.

data-valid

Present when the textarea is in valid state.

data-invalid

Present when the textarea is in invalid state.

data-dirty

Present when the textarea's value has changed.

data-touched

Present when the textarea has been touched.

data-filled

Present when the textarea is filled.

data-focused

Present when the textarea is focused.

Attribute	Description
`data-disabled`	Present when the textarea is disabled.
`data-valid`	Present when the textarea is in valid state.
`data-invalid`	Present when the textarea is in invalid state.
`data-dirty`	Present when the textarea's value has changed.
`data-touched`	Present when the textarea has been touched.
`data-filled`	Present when the textarea is filled.
`data-focused`	Present when the textarea is focused.

Examples

Infinite resize

Setting only a minRows will make the textarea automatically resize to fit its content.

import * as React from 'react';
import { Textarea } from '@base-ui-components/react/textarea';
import styles from './index.module.css';

export default function ExampleTextarea() {
  return <Textarea placeholder="Type something…" minRows={4} className={styles.Textarea} />;
}

Max rows

Setting both minRows and maxRows will make the textarea automatically resize between those limits.

import * as React from 'react';
import { Textarea } from '@base-ui-components/react/textarea';
import styles from './index.module.css';

export default function ExampleTextarea() {
  return (
    <Textarea placeholder="Type something…" minRows={4} maxRows={8} className={styles.Textarea} />
  );
}

Form integration

The textarea works seamlessly with the Form component and supports libraries like Zod for schema validation.

import * as React from 'react';
import { Field } from '@base-ui-components/react/field';
import { Form } from '@base-ui-components/react/form';
import { Textarea } from '@base-ui-components/react/textarea';
import styles from './index.module.css';

export default function ExampleForm() {
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  return (
    <Form
      className={styles.Form}
      errors={errors}
      onClearErrors={setErrors}
      onSubmit={async (event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const value = formData.get('feedback') as string;

        setLoading(true);
        const response = await submitForm(value);
        const serverErrors = {
          feedback: response.error,
        };

        setErrors(serverErrors);
        setLoading(false);
      }}
    >
      <Field.Root name="feedback" className={styles.Field}>
        <Field.Label className={styles.Label}>Feedback</Field.Label>
        <Textarea placeholder="Enter your feedback" className={styles.Textarea} />
        <Field.Error className={styles.Error} />
      </Field.Root>
      <button disabled={loading} type="submit" className={styles.Button}>
        Submit
      </button>
    </Form>
  );
}

async function submitForm(value: string) {
  // Mimic a server response
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });

  try {
    if (value.length < 10) {
      return { error: 'Feedback must be at least 10 characters long' };
    }
  } catch {
    return { error: 'Invalid feedback' };
  }

  return { success: true };
}

Field sizing

MDN: field-sizing · Can I Use

The CSS field-sizing property lets form fields size themselves to their content. For example, a <textarea> can grow or shrink as you type without JavaScript.

Browser support is about 71 % globally. Chrome 123+, Edge 123+, and Opera 109+ support it. Safari only recently added it in TP, and many others (Firefox, IE, Opera Mini, UC Browser, KaiOS) don’t yet.

Because support is incomplete, the demo may not work in older browsers or Safari <26. If the textarea doesn’t resize, try a current Chrome or Edge build.

Once support passes ~90 %, we plan to switch the Textarea component to field-sizing by default, dropping the JS fallback.

import * as React from 'react';
import { Textarea } from '@base-ui-components/react/textarea';
import styles from './index.module.css';

export default function ExampleTextarea() {
  return <Textarea placeholder="Type something…" className={styles.Textarea} />;
}