Components

Textarea

Multi-line text input component for collecting detailed information in government applications and forms with proper validation and accessibility.

Basic Usage

Simple textarea with label for collecting multi-line text input.

Government Form Examples

Real-world examples of textareas used in government applications with bilingual support.

Trade License Application / ট্রেড লাইসেন্স আবেদন

Minimum 50 characters required / সর্বনিম্ন ৫০ অক্ষর প্রয়োজন

Address Information / ঠিকানার তথ্য

Please provide complete address details / সম্পূর্ণ ঠিকানার বিবরণ দিন

Service Feedback / সেবার মতামত

Your feedback helps us improve our services / আপনার মতামত আমাদের সেবার মান উন্নত করতে সাহায্য করে

Textarea Variants

Different states and configurations for various use cases.

* This field is required

0/200 characters

Please provide a valid description

Use Cases

Application Forms

Business descriptions, project details, purpose statements, reasons for application

Communication

Messages to authorities, complaints, feedback, explanations, additional information

Personal Information

Addresses, employment history, educational background, family information

Documentation

Document descriptions, supporting evidence, case details, procedural notes

Best Practices

Content Guidelines

  • • Provide clear, helpful placeholder text with examples
  • • Include character limits when content length matters
  • • Use bilingual labels and placeholders for government forms
  • • Specify minimum character requirements for detailed fields

User Experience

  • • Set appropriate row heights based on expected content length
  • • Allow textarea to resize for user convenience
  • • Provide real-time character counting for limited fields
  • • Use consistent spacing and alignment with other form elements

Validation & Accessibility

  • • Implement proper error handling and validation messages
  • • Support both English and Bengali text input methods
  • • Ensure proper focus management and keyboard navigation
  • • Associate labels correctly for screen reader compatibility

Usage Guidelines

Do

  • Provide clear, descriptive labels and helpful placeholder text
  • Set appropriate row heights based on expected content length
  • Include character limits and counters when relevant
  • Support bilingual input for government applications
  • Implement proper validation with clear error messages
  • Allow textarea resizing for better user control

Don't

  • Use textareas for single-line inputs or short responses
  • Make textareas too small for expected content length
  • Forget to indicate required fields clearly
  • Use vague placeholder text without examples
  • Disable resize functionality unnecessarily
  • Ignore mobile keyboard considerations and input methods

Component Specifications

Detailed specifications and characteristics of the Textarea component for implementation guidance.

SpecificationDetailsPurpose & Usage
Component TypeMulti-line Text InputCaptures longer text input for descriptions, comments, and detailed information
Complexity LevelLowSimple to implement with basic text handling and validation features
Resize BehaviorAuto-resize, Manual resize, Fixed height, Minimum/Maximum heightsFlexible sizing options to accommodate varying content lengths
State ManagementDefault, Focus, Error, Disabled, Character count, Word countClear visual feedback and content tracking for user interactions
Validation FeaturesCharacter limits, Word limits, Required validation, Pattern matchingEnsures text input meets government form requirements and standards
Accessibility FeaturesLabel association, Screen reader support, Keyboard navigation, ARIA descriptionsEnsures usability for all citizens including those with disabilities
Language SupportEnglish, Bengali (বাংলা)Bilingual text input and placeholder support for government applications
Design SystemColor tokens, Typography scale, Border styles, Spacing unitsConsistent with CivixUI design principles and government branding
Content FeaturesRich text support, Line counting, Auto-save, Spell checkEnhanced text editing capabilities for comprehensive user input
Use CasesComments, Descriptions, Feedback, Applications, Long-form textEssential for collecting detailed information in government service applications

Accessibility

  • • All textareas support keyboard navigation and screen readers
  • • Labels are properly associated with textarea fields using htmlFor/id
  • • Error states are announced to assistive technologies
  • • Focus indicators are clearly visible and meet WCAG standards
  • • Character limits and counts are accessible to screen readers
  • • Required fields are marked and announced appropriately