Textarea
@/components/kamod-ui/textarea
Installation
Import Textarea from `@/components/kamod-ui/textarea`.
pnpm add @kamod-ch/uiUsage
Use Textarea with Field for labels, descriptions, errors, and more modern form layouts.
import { Textarea } from "@/components/kamod-ui/textarea";<Textarea />Basic Textarea
A clean default surface for short notes and feedback.
Field + Description
Wrap Textarea with Field for semantic labels and helper text.
Enter your message below.
Disabled + Invalid
Support disabled and invalid states with clear visual feedback.
Please enter a valid message.
Textarea Sizes
Render size variants for compact and roomy layouts.
Character Counter
Track input length in real time for message limits and form guidance.
Keep it concise and actionable.
Auto-resize
Auto-grow textarea height on input for longer, distraction-free writing.
This textarea grows with content until it reaches a comfortable max height.
Production Field Pattern
Combine label, hint, validation error and live character count in one practical form pattern.
Describe the change in at least 20 characters.
Textarea + Action
Pair the input with a trailing action for modern message flows.
API Reference
Props, slots and variants for this component.
Textarea
Textarea component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| size | "sm" | "md" | "lg" | "md" |
| aria-invalid | "true" | "false" | undefined |
| placeholder | string | undefined |
| disabled | boolean | false |
Accessibility Notes
Pair Textarea with a visible label (for example via Field), expose validation through aria-invalid, and keep placeholder text supplementary rather than instructional.