Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Textarea

Autosize or regular textarea

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Textarea component supports Input and Input.Wrapper components features and all textarea element props. Textarea documentation does not include all features supported by the component – see Input documentation to learn about all available features.

Input description

Variant
Size
Radius
import { Textarea } from '@mantine/core';

function Demo() {
  return (
    <Textarea
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

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)}
    />
  );
}

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}
      />
    </>
  );
}

Enable resize

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

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

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

Error state

Invalid name

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

function Demo() {
  return (
    <>
      <Textarea label="Boolean error" placeholder="Boolean error" error />
      <Textarea
        mt="md"
        label="With error message"
        placeholder="With error message"
        error="Invalid name"
      />
    </>
  );
}

Disabled state

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

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

Styles API

Textarea supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

Description

Error

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Get element ref

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

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

Accessibility

If Textarea is used without label prop, it will not be announced properly by screen reader:

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

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <Textarea />;
}

Set aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:

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

// Accessible input – it has aria-label
function Demo() {
  return <Textarea aria-label="My input" />;
}

If label prop is set, input will be accessible it is not required to set aria-label:

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

// Accessible input – it has associated label element
function Demo() {
  return <Textarea label="My input" />;
}

Previous

Switch

Next

TextInput

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people