Textarea
Renders textarea with optional autosize variant
Import
Source
Docs
Package
Usage
Use TextInput when you need to capture large amounts of text from user. Component supports all props from Input and InputWrapper components:
Radius
Size
<Textareaplaceholder="Your comment"label="Your comment"required/>
Autosize
Autosize textarea uses react-textarea-autosize package.
The height will grow until maxRows are reached or indefinitely if maxRows not set.
<Textareaplaceholder="Autosize with no rows limit"label="Autosize with no rows limit"autosizeminRows={2}/><Textarealabel="Autosize with 4 rows max"placeholder="Autosize with 4 rows max"autosizeminRows={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 element ref
You can get input ref with elementRef prop:
import { useRef } from 'react';import { Textarea } from '@mantine/core';function Demo() {const ref = useRef(null);return <Textarea elementRef={ref} />;}
Server side rendering
Component uses use-id hook to generate unique ids and aria- attributes,
provide static id prop to prevent props mismatch:
<Textarea /> // -> random id generated both on client and server, props mismatch warning<Textarea id="my-textarea" /> // -> id is static, no mismatches
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
Built by Vitaly Rtishchev and these awesome people