dotUI

Text Area

A text area allows users to enter multi-line text.

<TextField>
  <Label>Description</Label>
  <TextArea />
</TextField>

Installation

npx shadcn@latest add @dotui/text-area

Usage

Use TextArea to allow users to enter multi-line text content.

import { TextField } from "@/components/ui/text-field";
import { TextArea, InputGroup, InputGroupAddon } from "@/components/ui/input";
import { Label } from "@/components/ui/field";
<TextField>
	<Label>Description</Label>
	<TextArea />
</TextField>

Playground

Use the controls below to experiment with different text area props and see the live preview and code update.

<TextField>
  <TextArea placeholder="Enter description..." />
</TextField>

Examples

Type your description
You have exceeded the comment limit for one hour.

mirrored text: Roses are red, violets are blue.

API Reference

A textarea allows a user to input multi-line text.

PropType
union
string
DOMRenderFunction<"textarea", InputRenderProps>

Last updated on 5/22/2026