Primitive / Atomstable

Textarea

Multi-line input with glass, liquid, matte, and utility variants.

@glinui/uiComponent: textarea

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add textarea

Usage$

TSX

1import { Textarea } from "@glinui/ui"
2
3export function TextareaBasicDemo() {
4return <Textarea aria-label="Basic textarea" placeholder="Write something..." />
5}

Examples$

With Placeholder$

TSX

1import { Textarea } from "@glinui/ui"
2
3export function TextareaPlaceholderDemo() {
4return <Textarea aria-label="Issue details" placeholder="Describe your issue in detail..." />
5}

Custom Rows$

TSX

1import { Textarea } from "@glinui/ui"
2
3export function TextareaRowsDemo() {
4return (
5  <div className="space-y-3">
6    <Textarea rows={2} aria-label="Small textarea" placeholder="2 rows" />
7    <Textarea rows={4} aria-label="Default textarea" placeholder="4 rows (default)" />
8    <Textarea rows={8} aria-label="Large textarea" placeholder="8 rows" />
9  </div>
10)
11}

Surface Variants$

TSX

1import { Textarea } from "@glinui/ui"
2
3export function TextareaVariantsDemo() {
4return (
5  <div className="space-y-3">
6    <Textarea variant="default" aria-label="Default textarea" placeholder="Default" />
7    <Textarea variant="glass" aria-label="Glass textarea" placeholder="Glass" />
8    <Textarea variant="liquid" aria-label="Liquid textarea" placeholder="Liquid" />
9    <Textarea variant="matte" aria-label="Matte textarea" placeholder="Matte" />
10    <Textarea variant="outline" aria-label="Outline textarea" placeholder="Outline" />
11    <Textarea variant="filled" aria-label="Filled textarea" placeholder="Filled" />
12  </div>
13)
14}

Disabled$

TSX

1import { Textarea } from "@glinui/ui"
2
3export function TextareaDisabledDemo() {
4return <Textarea aria-label="Disabled textarea" disabled placeholder="Cannot edit this field" />
5}

Accessibility$

Always pair a <Textarea> with a <label> using htmlFor or supply an aria-label.
Placeholder text is not a substitute for labeling.
The rows attribute provides a visible size hint; use CSS min-height / max-height for precise control.
Disabled textareas convey their state through the native disabled attribute, readable by all major screen readers.

Reduced Motion$

Textarea has no built-in animation. Focus ring and border transitions respect the user's prefers-reduced-motion setting automatically via Tailwind.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from textareaVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost" \| "underline" \| "filled"`	No	`"default"`	Variant option from textareaVariants.

Source$

TSX

1import { Textarea } from "@glinui/ui"

packages/ui/src/components/textarea.tsx

packages/ui/src/tests/textarea.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/textarea.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TextareaProps

`TextareaProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from textareaVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "liquid" \| "matte" \| "outline" \| "ghost" \| "underline" \| "filled"`	No	`"default"`	Variant option from textareaVariants.