Textarea

Installation

Usage

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

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

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

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

Examples

Default

The base textarea uses the same glass surface treatment as the rest of the system and defaults to a resizable multiline field.

Glass

Add the glass class when you want the textarea to pick up a stronger glassmorphism surface.

Disabled

The disabled state follows the native disabled attribute and applies reduced opacity plus blocked pointer interaction.

Form Composition

Compose Textarea with native labels and helper text to build accessible form layouts without adding extra props.

Styling & API

Textarea accepts standard HTML textarea attributes and keeps styling fully class-driven. It ships with resize-y, a minimum height, and a default glass surface unless you override it with your own classes.

<Textarea className="glass" />

<Textarea className="glass glass-soft" />
<Textarea className="glass glass-strong" />

<Textarea rows={6} placeholder="Notes" />
<Textarea disabled />

<Textarea className="border-red-500 focus-visible:ring-red-500" />

<Textarea className="glass" />

<Textarea className="glass glass-soft" />
<Textarea className="glass glass-strong" />

<Textarea rows={6} placeholder="Notes" />
<Textarea disabled />

<Textarea className="border-red-500 focus-visible:ring-red-500" />