v4.2.12

Textarea

Renders textarea with optional autosize variant
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { Textarea } from '@mantine/core';


function Demo() {
  return (
    <Textarea
      placeholder="Your comment"
      label="Your comment"
      required
    />
  );
}

Autosize

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

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


function Demo() {
  return (
    <>
      <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 { useState } from 'react';
import { Textarea } from '@mantine/core';


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

Invalid state and error

Comment should not include bad words
// Error as boolean – red border color
<Textarea error />


// Error as React node – red border color and message below input
<Textarea error="Comment should not include bad words" />

Get input ref

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


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

Accessibility

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

<Textarea /> // -> not ok, textarea is not labeled
<Textarea label="My textarea" /> // -> ok, textarea and label is connected
<Textarea aria-label="My textarea" /> // -> ok, label is not visible but will be announced by screen reader
Go back
Switch – @mantine/core
Up next
TextInput – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter