Primitive / Atom

Textarea

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

Edit on GitHub

pnpm dlx @glinui/cli@latest add textarea

Send feedback

Tell us what is slowing you down. A person reads every message.

Topic

Message

183 characters left.

Installation

Install from

pnpm dlx @glinui/cli@latest add textarea

Prefer the package?

Usage

Variants

import { Textarea } from "@glinui/ui"


export function Demo() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Textarea variant="glinr" placeholder="glinr" rows={2} />
      <Textarea variant="solid" placeholder="solid" rows={2} />
      <Textarea variant="plain" placeholder="plain" rows={2} />
      <Textarea variant="soft" placeholder="soft" rows={2} />
      <Textarea variant="outline" placeholder="outline" rows={2} />
      <Textarea variant="ghost" placeholder="ghost" rows={2} />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Textarea } from "@glinui/ui"


export function Demo() {
  return (
    <Textarea variant="glass" placeholder="Glass textarea" />
  )
}

With Placeholder

import { Textarea } from "@glinui/ui"

export function TextareaPlaceholderDemo() {
  return <Textarea aria-label="Issue details" placeholder="Describe your issue in detail..." />
}

Surface Variants

import { Textarea } from "@glinui/ui"

export function TextareaVariantsDemo() {
  return (
    <div className="space-y-3">
      <Textarea variant="default" aria-label="Default textarea" placeholder="Default" />
      <Textarea variant="glass" aria-label="Glass textarea" placeholder="Glass" />
      <Textarea variant="liquid" aria-label="Liquid textarea" placeholder="Liquid" />
      <Textarea variant="matte" aria-label="Matte textarea" placeholder="Matte" />
      <Textarea variant="outline" aria-label="Outline textarea" placeholder="Outline" />
      <Textarea variant="filled" aria-label="Filled textarea" placeholder="Filled" />
    </div>
  )
}

Disabled

import { Textarea } from "@glinui/ui"

export function TextareaDisabledDemo() {
  return <Textarea aria-label="Disabled textarea" disabled placeholder="Cannot edit this field" />
}

Accessibility

Native `textarea` semantics.
Pair with `<label>` or `aria-label` for screen readers.
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.

Keyboard Interactions

Key	Action
`Tab`	Move focus to the textarea.

ARIA Attributes

`role="textbox"` native
`aria-invalid` for validation

Reduced Motion

No animation dependencies.

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
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Surface look. Omit to follow the ambient design style. Glass is opt-in.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Text size and inner spacing.
`rows`	`number`	-	`4`	Number of visible text lines.
`disabled`	`boolean`	-	`false`	Disables interaction.
`placeholder`	`string`	-	`-`	Placeholder text.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Textarea } from "@glinui/ui"

Source Files

textarea.tsx

textarea.test.tsxtest

Dependencies

@glinui/ui

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

TextareaProps

`TextareaProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from textareaSizeVariants.
`variant`	`ControlVariantProp`	No	`-`	Surface look. Omit to follow the ambient design style. Same vocabulary as Input.