Textarea - Dreamy UI

Textarea

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

#

Import

Textarea - The Textarea component.
TextareaRSC - The Textarea component with context.

import { Textarea } from "@dreamy-ui/react";
import { TextareaRSC } from "@dreamy-ui/react/rsc";

#

Usage

Textarea resizes automatically as it's content grows.

<Textarea placeholder="Enter your bio" />

#

Min and Max rows

Use minRows and maxRows props to control the number of rows the textarea can expand to.

<Textarea placeholder="Enter your bio" minRows={2} maxRows={4} />

#

Resize

Pass resize prop to the Textarea to enable resizing.

<Textarea placeholder="Enter your bio" resize="none" />
<Textarea placeholder="Enter your bio" resize="vertical" />
<Textarea placeholder="Enter your bio" resize="horizontal" />
<Textarea placeholder="Enter your bio" resize="both" />

#

Textarea Size

<VStack w="full">
	<Textarea placeholder="Enter your bio" size="sm" />
	<Textarea placeholder="Enter your bio" size="md" />
	<Textarea placeholder="Enter your bio" size="lg" />
</VStack>

#

Textarea Variant

<VStack w="full">
	<Textarea placeholder="Enter your bio" variant="outline" />
	<Textarea placeholder="Enter your bio" variant="filled" />
	<Textarea placeholder="Enter your bio" variant="flushed" />
</VStack>

#

Invalid

Pass isInvalid prop to the Textarea to show the error state.

<VStack w="full">
	<Textarea placeholder="Enter your bio" variant="outline" isInvalid />
	<Textarea placeholder="Enter your bio" variant="filled" isInvalid />
	<Textarea placeholder="Enter your bio" variant="flushed" isInvalid />
</VStack>

#

Usage with Field

Combine Textarea with Field to create a nice looking form element.

Biography

Biography should not contain any bad words.

<Field>
	<FieldLabel>Biography</FieldLabel>
	<Textarea placeholder="Enter your bio" />
	<FieldHelpText>Your biography should not contain any bad words.</FieldHelpText>
</Field>

#

No auto resize

If you want to disable the auto resize of the textarea, simply use TextareaNoAutoSize component.

<TextareaNoAutoSize placeholder="Enter your bio" />

#

RSC usage

TextareaRSC is a RSC compatible component that does not use client handlers.

<TextareaRSC placeholder="Enter your bio" />