Textarea

Multi-line text input

With Label

Usage

import { Textarea } from '@tryvienna/ui'

<Textarea placeholder="Write your message..." />

Examples

Default

Default

<Textarea placeholder="Write your message..." />

With Label

With Label

<div className="grid gap-2 w-80">
  <Label htmlFor="bio">Bio</Label>
  <Textarea id="bio" placeholder="Tell us about yourself..." />
</div>

With Rows

With Rows

<div className="grid gap-2 w-80">
  <Label htmlFor="message">Message</Label>
  <Textarea id="message" placeholder="Type your message..." rows={6} />
</div>

With Error

With Error

<div className="grid gap-2 w-80">
  <Label htmlFor="desc">Description</Label>
  <Textarea id="desc" placeholder="Describe the issue..." aria-invalid={true} />
  <p className="text-destructive text-sm">Description is required.</p>
</div>

Disabled

Disabled

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

With Default Value

With Default Value

<div className="grid gap-2 w-80">
  <Label htmlFor="prefilled">Notes</Label>
  <Textarea
    id="prefilled"
    defaultValue="This textarea has pre-filled content that demonstrates how longer text looks in the component. The field-sizing: content CSS property allows it to auto-resize."
  />
</div>

API Reference

Textarea

Also accepts all props from textarea.

Data Attributes

Component	data-slot
Textarea	"textarea"