Docs/Textarea

Textarea

Multi-line text input with consistent Storm styling.

Usage

tsx

1import { Textarea } from '@storm-ds/ui'
2
3<Textarea placeholder="Write something..." />

Default

Message

tsx

1<div className="space-y-2">
2  <Label htmlFor="msg">Message</Label>
3  <Textarea id="msg" placeholder="Write your message..." />
4</div>

Disabled

tsx

1<Textarea disabled placeholder="Disabled textarea" />

Error

Message

This field is required.

tsx

1<div className="space-y-2">
2  <Label htmlFor="err-msg">Message</Label>
3  <Textarea id="err-msg" error placeholder="Required field" />
4  <p className="text-sm text-storm-destructive">This field is required.</p>
5</div>

Resize

tsx

1<Textarea resize="none" placeholder="No resize" />
2<Textarea resize="vertical" placeholder="Vertical resize (default)" />
3<Textarea resize="horizontal" placeholder="Horizontal resize" />
4<Textarea resize="both" placeholder="Both directions" />

Props

Prop	Type	Default	Description
className	string	-	Custom classes
error	boolean	false	Shows destructive border and ring
resize	'none' \| 'vertical' \| 'horizontal' \| 'both'	'vertical'	Controls resize behavior

Use with AI

Create a Next.js component using Storm UI's Textarea. Import: `import { Textarea } from '@storm-ds/ui'`. Uses border Storm signature with min-h-[120px]. Use `error` prop to show a destructive red border and ring for validation states. Use `resize` prop to control resize behavior: 'none', 'vertical' (default), 'horizontal', or 'both'. Supports all native textarea attributes. Example: `<Textarea placeholder="Write your message..." />`, `<Textarea error placeholder="Required field" />`, `<Textarea resize="none" />`

Input

Select