Textarea

The Textarea component allows you to easily create multi-line text inputs.

Import

import { Textarea } from "@recastui/react";

Usage

Editable Example

<Textarea placeholder='Here is a sample placeholder' />

Resize

The Textarea component comes in four resize options. The default is both.

Editable Example

<div className='space-y-4'>
		<Textarea placeholder='resize both' resize='both' />
		<Textarea placeholder='resize horizontal' resize='horizontal' />
		<Textarea placeholder='resize vertical' resize='vertical' />
		<Textarea placeholder='resize none' resize='none' />
	</div>

Variant

The Textarea component comes in 4 variants: outline, solid, underline, and rounded. Pass the variant prop and set it to one of these values. The default variant is outline.

Editable Example

<div className='space-y-4'>
		<Textarea variant='outline' placeholder='Outline' />
		<Textarea variant='solid' placeholder='Solid' />
		<Textarea variant='underline' placeholder='Underline' />
		<Textarea variant='rounded' placeholder='Rounded' />
	</div>

Error

Editable Example

<Textarea placeholder='Textarea error' error />

Disabled

Editable Example

<Textarea placeholder='Textarea disabled' disabled />

Full width

The Textarea component comes full width by default its true.

Editable Example

<div className='space-y-4'>
	<Textarea placeholder='Full width' fullWidth />
	<Textarea placeholder='Width auto' fullWidth={false} />
	</div>