Textarea - Dreamy UI

Textarea

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

#

Installation

npx dreamy add textarea

pnpm dlx dreamy add textarea

yarn dlx dreamy add textarea

bunx dreamy add textarea

#

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.Root>
	<Field.Label>Biography</Field.Label>
	<Textarea placeholder="Enter your bio" />
	<Field.Hint>Your biography should not contain any bad words.</Field.Hint>
</Field.Root>

#

No auto resize

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

<TextareaNoAutoSize placeholder="Enter your bio" />

Text

Theme