Primitives
Textarea
Multiline text input for longer form content. Supports labels, hints, error states, and multiple visual variants.
Live Demo
Interactive Textareas
0/500 characters used.
Installation
npm install @trinkui/reactImport
import { Textarea } from "@trinkui/react";Usage
Maximum 500 characters.
<Textarea
label="Message"
placeholder="Type your message here..."
hint="Maximum 500 characters."
rows={4}
/>Variants
<Textarea variant="default" placeholder="Default variant" />
<Textarea variant="filled" placeholder="Filled variant" />
<Textarea variant="ghost" placeholder="Ghost variant" />Sizes
<Textarea size="sm" placeholder="Small" />
<Textarea size="md" placeholder="Medium" />
<Textarea size="lg" placeholder="Large" />Error State
Bio must be at least 20 characters.
<Textarea
label="Bio"
placeholder="Tell us about yourself..."
error="Bio must be at least 20 characters."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label text shown above the textarea |
| hint | string | -- | Helper text displayed below the textarea |
| error | string | -- | Error message; applies error border styling when set |
| size | "sm" | "md" | "lg" | "md" | Size of the textarea |
| variant | "default" | "filled" | "ghost" | "default" | Visual style variant |
| rows | number | 3 | Number of visible text rows |
| className | string | -- | Additional CSS classes |
Accessibility
- Uses a native
<textarea>element for built-in keyboard support. - Label is linked via
htmlFor/idpairing. - Error and hint text are linked with
aria-describedby. - Focus-visible ring provides clear keyboard focus indication.