Textarea is a multi-line text input element.
import { Textarea } from 'primereact/textarea';<Textarea />Basic usage demonstrates a simple multi-line text input field for entering longer text content.
import { Textarea } from 'primereact/textarea';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<Textarea rows={5} cols={30} />
</div>
);
}Textarea can automatically adjust its height based on the content by setting the autoResize property.
import { Textarea } from 'primereact/textarea';
export default function AutoResizeDemo() {
return (
<div className="card flex justify-center">
<Textarea autoResize rows={5} cols={30} />
</div>
);
}Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
import { Textarea } from 'primereact/textarea';
export default function FilledDemo() {
return (
<div className="card flex justify-center">
<Textarea variant="filled" rows={5} cols={30} />
</div>
);
}A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
import { Label } from 'primereact/label';
import { Textarea } from 'primereact/textarea';
import * as React from 'react';
export default function FloatLabelDemo() {
const [value1, setValue1] = React.useState('');
const [value2, setValue2] = React.useState('');
const [value3, setValue3] = React.useState('');
return (
<div className="card flex flex-wrap justify-center items-stretch gap-4">
<Label.Float>
<Textarea value={value1} onInput={(e: React.FormEvent<HTMLTextAreaElement>) => setValue1(e.currentTarget.value)} id="over_label" rows={5} cols={30} style={{ resize: 'none' }} className="h-full" />
<Label htmlFor="over_label">Over Label</Label>
</Label.Float>
<Label.Float variant="in">
<Textarea value={value2} onInput={(e: React.FormEvent<HTMLTextAreaElement>) => setValue2(e.currentTarget.value)} id="in_label" rows={5} cols={30} style={{ resize: 'none' }} className="h-full" />
<Label htmlFor="in_label">In Label</Label>
</Label.Float>
<Label.Float variant="on">
<Textarea value={value3} onInput={(e: React.FormEvent<HTMLTextAreaElement>) => setValue3(e.currentTarget.value)} id="on_label" rows={5} cols={30} style={{ resize: 'none' }} className="h-full" />
<Label htmlFor="on_label">On Label</Label>
</Label.Float>
</div>
);
}IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
import { Label } from 'primereact/label';
import { Textarea } from 'primereact/textarea';
import * as React from 'react';
export default function IftaLabelDemo() {
const [value, setValue] = React.useState('');
return (
<div className="card flex justify-center">
<Label.Ifta>
<Textarea id="description" value={value} onInput={(e: React.FormEvent<HTMLTextAreaElement>) => setValue(e.currentTarget.value)} rows={5} cols={30} style={{ resize: 'none' }} />
<Label htmlFor="description">Description</Label>
</Label.Ifta>
</div>
);
}Textarea provides small and large sizes as alternatives to the base by setting the size property.
import { Textarea } from 'primereact/textarea';
export default function BasicDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<Textarea size="small" placeholder="Small" rows={3} />
<Textarea placeholder="Normal" rows={3} />
<Textarea size="large" placeholder="Large" rows={3} />
</div>
);
}Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
import { Textarea } from 'primereact/textarea';
import * as React from 'react';
export default function InvalidDemo() {
const [value, setValue] = React.useState('');
return (
<div className="card flex justify-center">
<Textarea value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} invalid={value === ''} rows={5} cols={30} />
</div>
);
}When disabled is present, the element cannot be edited and focused.
import { Textarea } from 'primereact/textarea';
export default function DisabledDemo() {
return (
<div className="card flex justify-center">
<Textarea rows={5} cols={30} disabled />
</div>
);
}