Components / Textarea
Textarea
Multi-line text input with floating label, optional auto-resize, character count, size variants, rounded options, and validation states (error/success).
forms v0.1.0
Playground
Examples
Basic
<cg-textarea placeholder="Write something..." maxlength="200" style="max-width: 400px;"></cg-textarea>Sizes
<cg-stack gap="sm" style="max-width: 400px;"><cg-textarea size="sm" placeholder="Small textarea"></cg-textarea><cg-textarea size="md" placeholder="Medium (default)"></cg-textarea><cg-textarea size="lg" placeholder="Large textarea"></cg-textarea></cg-stack>Auto-resize
<cg-textarea autoresize placeholder="This grows as you type..." style="max-width: 400px;"></cg-textarea>States
<cg-stack gap="sm" style="max-width: 400px;"><cg-textarea error placeholder="Error state"></cg-textarea><cg-textarea success placeholder="Success state"></cg-textarea><cg-textarea readonly placeholder="Read-only"></cg-textarea></cg-stack>Floating labels
<cg-stack gap="sm" style="max-width: 400px;"><cg-textarea label="Description" placeholder="Tell us more..."></cg-textarea><cg-textarea label="Notes" helper="Optional" rows="3"></cg-textarea></cg-stack>Import
import { CgTextarea } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-textarea';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "" | Floating label text — shrinks and rises on focus |
value | string | "" | Text value |
placeholder | string | "" | Placeholder text |
helper | string | — | Helper text below the textarea |
name | string | "" | Form field name |
rows | number | 3 | Visible text rows |
maxlength | number | 0 | Max character count (shows counter when > 0) |
size | "sm" | "md" | "lg" | "md" | Textarea size variant |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius override |
disabled | boolean | false | Disable interaction |
readonly | boolean | false | Read-only mode |
error | boolean | false | Error state — red border and focus ring |
success | boolean | false | Success state — green border and focus ring |
autoresize | boolean | false | Auto-resize height to content, disables manual resize |
Events
| Event | Detail | Description |
|---|---|---|
cg-input | {value: string} | On every input change |