Skip to main content

​
Overview

HuxTextarea is a customizable multi-line text input component with consistent styling and extensive customization options. It provides a clean, modern textarea with support for labels, hints, validation, and character counting while automatically adapting to light and dark themes. Optimized for longer text input with proper height handling.

​
Basic Usage

​
Simple Textarea

HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
)

​
Textarea with Character Count

HuxTextarea(
  label: 'Comments',
  hint: 'Enter your comments...',
  minLines: 4,
  maxLines: 8,
  maxLength: 500,
  showCharacterCount: true,
)

​
Textarea with Validation

HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
  helperText: 'Provide a detailed description',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a description';
    }
    if (value.length < 10) {
      return 'Description must be at least 10 characters';
    }
    return null;
  },
)

​
Textarea with Error State

HuxTextarea(
  label: 'Description',
  hint: 'Enter a description...',
  minLines: 3,
  maxLines: 6,
  errorText: 'Description is required',
)

​
Properties

​
Core Properties

  • label - Optional field label text displayed above the textarea
  • hint - Placeholder text displayed inside the textarea when empty
  • controller - TextEditingController for managing input state
  • onChanged - Callback triggered when the textarea value changes
  • onSubmitted - Callback triggered when the user submits the textarea

​
Validation Properties

  • validator - Form validation function that returns error text or null
  • errorText - Custom error message (overrides validator output)
  • helperText - Helper text displayed below the textarea

​
Behavior Properties

  • enabled - Whether the textarea is interactive (default: true)
  • minLines - Minimum number of text lines (default: 3)
  • maxLines - Maximum number of text lines (default: 6)
  • maxLength - Maximum character length
  • showCharacterCount - Whether to show character count when maxLength is set (default: false)
  • keyboardType - Type of keyboard to display
  • textInputAction - Action button for the keyboard

​
Layout Properties

  • width - Custom width (default: full width)

​
Styling & Dimensions

​
Dimensions

  • Border Radius: 8px (rounded corners)
  • Font Size: 14px with 1.4 line height
  • Horizontal Padding: 12px (compact padding for better text density)
  • Vertical Padding: 12px

​
Theme Support

  • Automatically adapts to light and dark themes
  • Uses HuxTokens for consistent theming
  • Label uses FontWeight.w400 for lighter appearance

​
Character Count

When maxLength is set and showCharacterCount is true, the textarea displays a character counter in the format “X / Y” at the bottom right. The counter updates dynamically as you type. 
HuxTextarea(
  label: 'Message',
  maxLength: 500,
  showCharacterCount: true,
)

​
Examples

​
Basic Form with Textarea

Form(
  key: _formKey,
  child: Column(
    children: [
      HuxInput(
        label: 'Name',
        hint: 'Enter your name',
      ),
      const SizedBox(height: 16),
      HuxTextarea(
        label: 'Message',
        hint: 'Enter your message...',
        minLines: 4,
        maxLines: 8,
        maxLength: 1000,
        showCharacterCount: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Message is required';
          }
          return null;
        },
      ),
    ],
  ),
)

​
Disabled Textarea

HuxTextarea(
  label: 'Notes',
  hint: 'This field is disabled',
  enabled: false,
  minLines: 3,
  maxLines: 6,
)

​
Best Practices

  • Use minLines to set the initial visible height
  • Set maxLines to prevent the textarea from growing too large
  • Use showCharacterCount when you have a maxLength to help users stay within limits
  • Provide helpful helperText to guide users on what to enter
  • Use validation to ensure data quality