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.
'use client';
import { Textarea } from 'primereact/textarea';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<Textarea rows={5} cols={30} />
</div>
);
}
Textarea can automatically adjust its height based on the content by setting the autoResize property.
'use client';
import { Textarea } from 'primereact/textarea';
export default function AutoResizeDemo() {
return (
<div className="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.
'use client';
import { Textarea } from 'primereact/textarea';
export default function FilledDemo() {
return (
<div className="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.
'use client';
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="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.
'use client';
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="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.
'use client';
import { Textarea } from 'primereact/textarea';
export default function BasicDemo() {
return (
<div className="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.
'use client';
import { Textarea } from 'primereact/textarea';
import * as React from 'react';
export default function InvalidDemo() {
const [value, setValue] = React.useState('');
return (
<div className="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.
'use client';
import { Textarea } from 'primereact/textarea';
export default function DisabledDemo() {
return (
<div className="flex justify-center">
<Textarea rows={5} cols={30} disabled />
</div>
);
}