I'll create a comprehensive Textarea component that uses the existing Label component for labeling and supports all the states shown in the design.

Textarea Component

I've created a comprehensive Textarea component that integrates with your existing Label component and matches the design shown in the image.

Features

Core Functionality

• Resizable Textarea: Supports different resize options (both, horizontal, vertical, none)
• Controlled & Uncontrolled Modes: Works with or without external state management
• Character Counter: Optional character count with max length support
• Auto-resize: Optional auto-height adjustment based on content

Visual Variants

• Outline: Standard bordered textarea (default)
• Filled: Textarea with background color
• Flushed: Borderless textarea with only a bottom border

States

• Default: Standard state with normal styling
• Focus: Enhanced styling when the textarea is focused
• Error: Red border and error message for validation errors
• Disabled: Grayed out appearance for disabled state
• Read-only: Non-editable but not visually disabled

Sizing

• Small: Compact size for tight spaces
• Medium: Standard size (default)
• Large: Larger size for emphasis or accessibility

Integration with Label Component

The Textarea component uses your existing Label component for labeling, ensuring consistency across your form elements. It passes the following props to the Label component:

• label: The label text
• isRequired: Whether the field is required
• isDisabled: Whether the field is disabled
• size: The size of the label (matched to textarea size)
• helperText: Description text shown below the label
• htmlFor: Automatically set to the textarea's ID for accessibility

Usage Examples

Basic Usage

With Error State

Disabled State

With Character Counter

Auto-resize

The component is fully tested and documented with Storybook stories to showcase all variants and use cases. It integrates seamlessly with your existing component library and follows the same design patterns.

I'll create the complete Textarea component implementation for you:

Textarea Component

I've created a comprehensive Textarea component that integrates with your existing Label component and matches the design shown in the image. The component is fully functional, styled according to your design system, and includes all necessary features.

Features Implemented

Core Functionality

• Multiple Variants: Outline (default), Filled, and Flushed styles
• Size Options: Small, Medium (default), and Large
• Resize Controls: Options for both, horizontal, vertical, or none
• Auto-resize: Optional auto-height adjustment based on content
• Character Counter: Optional character count with max length support
• Error States: Proper error styling with error message display
• Accessibility: Full ARIA support and keyboard navigation

Integration with Label Component

• Uses your existing Label component for consistent labeling
• Passes description text as helperText to the Label
• Properly handles error states and required fields
• Maintains consistent sizing between Label and Textarea

State Management

• Works in both controlled and uncontrolled modes
• Properly handles value changes and updates
• Manages disabled, read-only, and required states

Implementation Details

1. Component Structure:

   • Main wrapper div for the entire component
   • Label component for the label and description
   • Textarea container for positioning elements
   • Native textarea element with all necessary attributes
   • Optional character counter
   • Error message display when needed

2. Styling:

   • Uses CSS variables from your design system
   • Matches the exact styling shown in your design
   • Properly handles all states (default, focus, error, disabled)
   • Responsive and accessible design

3. Props API:

   • Comprehensive props for all features
   • Extends native textarea attributes
   • Clear TypeScript typing for all props

4. Testing & Documentation:

   • Complete test suite covering all functionality
   • Storybook stories for all variants and states
   • Example page showing various use cases

Usage Example

The component is now ready to use in your application and follows all the design patterns shown in your image.