Textarea

Installation

Usage

import { Textarea } from "@/components/ui/textarea"

export default function App() {
  return (
    <Textarea variant="soft" size="md" placeholder="Share your thoughts" />
  )
}

import { Textarea } from "@/components/ui/textarea"

export default function App() {
  return (
    <Textarea variant="soft" size="md" placeholder="Share your thoughts" />
  )
}

Examples

Default

The standard textarea uses the default variant with the medium size.

Sizes

Use the size prop for the standard textarea scale. md is the default. Pair it with native rows when you want more room for content.

Variants

Use variants to change the surface treatment before reaching for custom classes.

Error State

Glass UI textareas do not use an error prop. Set aria-invalid="true" to opt into the built-in destructive border and focus ring.

Disabled

The disabled state is automatically handled by the component using Tailwind’s native disabled attribute.

Form Composition

Use Field for the canonical label + control + helper text pattern. Textarea remains a native textarea outside that wrapper too.

Styling

Textarea now follows the same prop-first API direction as Button and Input. Reach for variant and size first, then use className as an escape hatch for one-off layout or state styling.

/* Variants */

<Textarea variant="default" />
<Textarea variant="soft" />
<Textarea variant="strong" />
<Textarea variant="transparent" />

/* Sizes (defaults to md) */

<Textarea size="sm" />
<Textarea size="md" />
<Textarea size="lg" />

/* Native sizing and invalid state */

<Textarea rows={6} placeholder="Notes" />
<Textarea aria-invalid="true" />

/* Escape hatch */

<Textarea className="rounded-3xl" />

/* Variants */

<Textarea variant="default" />
<Textarea variant="soft" />
<Textarea variant="strong" />
<Textarea variant="transparent" />

/* Sizes (defaults to md) */

<Textarea size="sm" />
<Textarea size="md" />
<Textarea size="lg" />

/* Native sizing and invalid state */

<Textarea rows={6} placeholder="Notes" />
<Textarea aria-invalid="true" />

/* Escape hatch */

<Textarea className="rounded-3xl" />

API Reference