Textarea

Render textarea with optional autosize variant

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Use TextInput when you need to capture large amounts of text from user. Component supports all props from Input and InputWrapper components. See full information about shared inputs props in inputs guide.

<Textarea
  placeholder="Password"
  label="Password"
  description="Password must include at least one letter, number and special character"
  required
/>

Autosize

Autosize textarea uses react-textarea-autosize package. The height will grow until maxRows are reached or indefinitely if maxRows not set.

Autosize with no rows limit

Autosize with 4 rows max

<Textarea
  placeholder="Autosize with no rows limit"
  label="Autosize with no rows limit"
  autosize
  minRows={2}
/>

<Textarea
  label="Autosize with 4 rows max"
  placeholder="Autosize with 4 rows max"
  autosize
  minRows={2}
  maxRows={4}
/>

Controlled

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

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

Get element ref

You can get input ref with elementRef prop:

import React, { useRef } from 'react';
import { Textarea } from '@mantine/core';

function Demo() {
  const ref = useRef(null);
  return <Textarea elementRef={ref} />;
}

Accessibility

Provide aria-label in case you use component without label for screen reader support:

<Textarea label="My textarea" />; // -> ok, textarea and label is connected
<Textarea />; // not ok, textarea is not labeled
<Textarea aria-label="My textarea" />; // -> ok, label is not visible but will be announced by screen reader