Skip to content
FelicityUI

Textarea

Displays a form textarea or a component that looks like a textarea.

Installation

terminal
npx felicityui add textarea --platform react

Usage

example.tsx
import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Type your message here." />

Composition

Textarea
└── (optional) label / description / error

Default

Field

Label and description via Textarea field chrome.

Your thoughts help shape the next release.

Disabled

disabled sets data-disabled on the field shell.

Invalid

error ties to aria-invalid and data-invalid.

Button

Pair with Button for a submit action.

RTL

dir=rtl

صف التغيير بإيجاز.

API Reference

PropTypeDefaultDescription
labelReactNode—Optional field label.
descriptionReactNode—Helper text below the control.
errorReactNode—Error message; sets invalid styling.
invalidboolean—Marks the control invalid without requiring error text.
hintReactNode—Inline hint beside the label.
orientationvertical | horizontalverticalLabel layout relative to the control.
rowsnumber4Visible row count.
disabledboolean—Disables the textarea.
classNamestring—Additional classes on the control.
textareaVariants({ invalid?, className? }) => string—Exported class helper.

Accessibility

WCAG 2.2 AA

  • Native textarea semantics.
  • Label associated via htmlFor when field chrome is used.
  • aria-invalid and role=alert for errors.
  • Visible focus-visible ring.

Platform notes

React

Native HTML textarea with Felicity semantic tokens. Paper surface, hairline border, copper focus ring — not Base UI / Radix runtime.

  • Server Component compatible.
  • Uses data-slot=textarea; field chrome uses data-slot=field|field-label|field-description|field-error.
  • data-invalid and data-disabled on the field shell when chrome is present.
  • aria-invalid when invalid or error is set.