rows- Type
number- Default
3- Description
- Initial visible rows.
Components / Inputs
Textarea
பெரும் உரை
Textarea is a multi-line text input for longer content like descriptions, feedback, or notes. Tamil DS textareas have auto-height consideration for Tamil script.
பெரும் உரை நீண்ட உள்ளடக்கத்திற்கான பல வரி உரை உள்ளீடு ஆகும்.
Basic
Component preview
Textarea examplesபெரும் உரை உதாரணங்கள்Character count
Component preview
With counterஎண்ணிக்கையுடன்Anatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Container
கொள்கலன்required<textarea>Native <textarea> with Tamil DS styling. Rounded-md border, min-height 96px (min-h-24). Supports field-sizing-content for auto-grow. Focus ring matches Input component (ring-ring/25). Error state via aria-invalid.
2
Placeholder
இடப்பிடிப்பான்Placeholder text at 60% muted-foreground opacity. Should be an example value or instruction. For Tamil: உங்கள் கருத்தை இங்கே எழுதுக... For bilingual: include both languages.
3
Resize handle
மறுஅளவு கைப்பிடி<div>Native browser resize handle. Allows vertical/horizontal resizing. Disable with CSS resize: none if field-sizing-content auto-grow is preferred.
API
Props
maxLength- Type
number- Default
- -
- Description
- Maximum character count.
placeholder- Type
string- Default
- -
- Description
- Hint text. Use Tamil example content.
disabled- Type
boolean- Default
false- Description
- Disables the field.
className- Type
string- Default
- -
- Description
- Add resize-none to prevent resizing.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 3 | Initial visible rows. |
maxLength | number | - | Maximum character count. |
placeholder | string | - | Hint text. Use Tamil example content. |
disabled | boolean | false | Disables the field. |
className | string | - | Add resize-none to prevent resizing. |
Tamil note
Tamil script characters are taller than Latin. When collecting Tamil input, increase minimum row height by ~25% compared to Latin-only fields. Use rows=5 where you would use rows=4 for Latin-only content.
Best practices
Set rows to match expected content length
எதிர்பார்க்கப்படும் உள்ளடக்க நீளத்திற்கு ஏற்ப rows அமைக்கவும்
Set an appropriate initial rows height so users see a textarea that matches the amount of text expected.
பயனர் எவ்வளவு தகவல் தர வேண்டும் என்று புரிய பொருத்தமான rows அளவு அமைக்கவும்.
Don't use Textarea for single-line input
ஒரு வரி உள்ளீட்டிற்கு Textarea பயன்படுத்தாதே
Single-line fields like name or email should use Input, not Textarea — it signals multiline intent to users.
பெயர் அல்லது மின்னஞ்சல் போன்ற ஒரு வரி உள்ளீட்டிற்கு Input பயன்படுத்தவும், Textarea அல்ல.
Show a character count for length-limited textareas
நீளம் வரம்பிட்ட பெரும் உரைக்கு எழுத்து எண்ணிக்கை காட்டவும்
Display a live character counter so users know how much space they have left before hitting the limit.
பயனர் எத்தனை எழுத்துகள் மீதமுள்ளன என்று நேரலையில் காண எழுத்து எண்ணிக்கை காட்டவும்.
Don't set maxLength without showing remaining count
மீதமுள்ள எழுத்துகள் காட்டாமல் maxLength அமைக்காதே
Setting maxLength alone silently blocks typing at the limit — users need to see how many characters are left.
maxLength மட்டும் அமைப்பது திடீரென்று தட்டச்சை நிறுத்துகிறது — பயனர் மீதமுள்ள எழுத்துகளை காண வேண்டும்.