Textarea

import { TextareaDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Textarea);

Usage

Loading state

Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right'. This is useful for async operations like API calls, searches, or validations:

Controlled

import { useState } from 'react';
import { Textarea } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <Textarea
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}

Uncontrolled

Textarea can be used with uncontrolled forms the same way as a native textarea element. Set the name attribute to include textarea value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.

Example usage of uncontrolled Textarea with FormData:

import { Textarea } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Textarea value:', formData.get('message'));
      }}
    >
      <Textarea label="Enter your message" name="message" />
      <button type="submit">Submit</button>
    </form>
  );
}

Bottom section

Use bottomSection prop to render content inside the input border at the bottom. This is useful for displaying character counters, hints, or other supplementary information:

Autosize

The autosize textarea height grows until maxRows are reached or indefinitely if maxRows is not set:

Enable resize

By default, resize is none; to enable it, set the resize prop to vertical or both:

Error state

Success state

Disabled state