Animated Textarea
Buttons
A floating-label textarea with animated border, focus ring, character counter, auto-resize support, and error state.
Loading preview...
Customize
Label
Placeholder
Max Length200
Auto Resize
Disabled
Rows4
Error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | Floating label text displayed above the textarea. |
placeholder | string | undefined | Placeholder text shown when the label is floating. |
value | string | '' | Controlled textarea value. |
onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | undefined | Change handler for the textarea. |
error | string | undefined | Error message displayed below the textarea. |
disabled | boolean | false | Disables the textarea. |
maxLength | number | undefined | Maximum character count. Shows a counter when set. |
autoResize | boolean | false | Auto-resize the textarea to fit content. |
className | string | '' | Additional CSS classes. |
rows | number | 4 | Number of visible rows (ignored when autoResize is true). |