BlueStack.io - Component Library

text-area Component

Text Area System

Basic Text Areas - Flexible Input Structure

Preview Code

Copy

Description *

Please provide at least 50 characters

Comments

<div class="space-y-3">
  <textarea class="textarea" placeholder="Enter your message here..." rows="4"></textarea>

  <div class="textarea-field">
    <label class="label">
      <span>Description</span>
      <span class="required">*</span>
    </label>
    <div class="textarea-wrapper">
      <textarea class="textarea" placeholder="Describe your project..." rows="4"></textarea>
    </div>
    <div class="hint">
      <i class="icon info-circle w-4 h-4"></i>
      <span>Please provide at least 50 characters</span>
    </div>
  </div>

  <div class="textarea-field floating">
    <div class="textarea-wrapper">
      <textarea class="textarea" placeholder=" " rows="3"></textarea>
      <label class="label">Comments</label>
    </div>
  </div>
</div>

<div class="textarea-field">
                    <label class="label">
                        <span>Description</span>
                        <span class="required">*</span>
                    </label>
                    <div class="textarea-wrapper">
                        <textarea class="textarea" placeholder="Describe your project..." rows="4"></textarea>
                    </div>
                    <div class="hint">
                        <i class="icon info-circle w-4 h-4"></i>
                        <span>Please provide at least 50 characters</span>
                    </div>
                </div>

<div class="textarea-field floating">
                    <div class="textarea-wrapper">
                        <textarea class="textarea" placeholder=" " rows="3"></textarea>
                        <label class="label">Comments</label>
                    </div>
                </div>
            </div>

Text Area Sizes - Consistent Scaling

Preview Code

Copy

Tiny Text Area

Small Text Area

Default Text Area

Large Text Area

Big Text Area

<div class="space-y-3">
  <div class="textarea-field tiny">
    <label class="label">Tiny Text Area</label>
    <textarea
      class="textarea"
      placeholder="Tiny size - compact for short inputs..."
      rows="2"
    ></textarea>
  </div>

  <div class="textarea-field small">
    <label class="label">Small Text Area</label>
    <textarea class="textarea" placeholder="Small size - slightly reduced..." rows="3"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Default Text Area</label>
    <textarea class="textarea" placeholder="Default size - standard input..." rows="4"></textarea>
  </div>

  <div class="textarea-field large">
    <label class="label">Large Text Area</label>
    <textarea class="textarea" placeholder="Large size - more prominent..." rows="4"></textarea>
  </div>

  <div class="textarea-field big">
    <label class="label">Big Text Area</label>
    <textarea class="textarea" placeholder="Big size - maximum prominence..." rows="5"></textarea>
  </div>
</div>

<div class="textarea-field small">
                    <label class="label">Small Text Area</label>
                    <textarea class="textarea" placeholder="Small size - slightly reduced..." rows="3"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Default Text Area</label>
                    <textarea class="textarea" placeholder="Default size - standard input..." rows="4"></textarea>
                </div>

<div class="textarea-field large">
                    <label class="label">Large Text Area</label>
                    <textarea class="textarea" placeholder="Large size - more prominent..." rows="4"></textarea>
                </div>

State Variants - Visual Feedback

Preview Code

Copy

Default State

Focus State (click to see)

Error State *

This field is required

Success State

Looks good!

Warning State

Please review your input

Disabled State

This field is disabled

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
  <div class="textarea-field">
    <label class="label">Default State</label>
    <textarea class="textarea" placeholder="Normal state...">Sample text</textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Focus State (click to see)</label>
    <textarea class="textarea" placeholder="Click to see focus ring..."></textarea>
  </div>

  <div class="textarea-field error">
    <label class="label">
      <span>Error State</span>
      <span class="required">*</span>
    </label>
    <textarea class="textarea" placeholder="This field has an error..."></textarea>
    <div class="hint">
      <i class="icon x-circle w-4 h-4"></i>
      <span>This field is required</span>
    </div>
  </div>

  <div class="textarea-field success">
    <label class="label">Success State</label>
    <textarea class="textarea" placeholder="Valid input...">Valid content entered</textarea>
    <div class="hint">
      <i class="icon check-circle w-4 h-4"></i>
      <span>Looks good!</span>
    </div>
  </div>

  <div class="textarea-field warning">
    <label class="label">Warning State</label>
    <textarea class="textarea" placeholder="Warning...">Content needs review</textarea>
    <div class="hint">
      <i class="icon alert-triangle w-4 h-4"></i>
      <span>Please review your input</span>
    </div>
  </div>

  <div class="textarea-field">
    <label class="label">Disabled State</label>
    <textarea class="textarea" placeholder="Disabled..." disabled>Cannot edit this</textarea>
    <div class="hint">This field is disabled</div>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                
                <div class="textarea-field">
                    <label class="label">Default State</label>
                    <textarea class="textarea" placeholder="Normal state...">Sample text</textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Focus State (click to see)</label>
                    <textarea class="textarea" placeholder="Click to see focus ring..."></textarea>
                </div>

<div class="textarea-field error">
                    <label class="label">
                        <span>Error State</span>
                        <span class="required">*</span>
                    </label>
                    <textarea class="textarea" placeholder="This field has an error..."></textarea>
                    <div class="hint">
                        <i class="icon x-circle w-4 h-4"></i>
                        <span>This field is required</span>
                    </div>
                </div>

<div class="textarea-field success">
                    <label class="label">Success State</label>
                    <textarea class="textarea" placeholder="Valid input...">Valid content entered</textarea>
                    <div class="hint">
                        <i class="icon check-circle w-4 h-4"></i>
                        <span>Looks good!</span>
                    </div>
                </div>

<div class="textarea-field warning">
                    <label class="label">Warning State</label>
                    <textarea class="textarea" placeholder="Warning...">Content needs review</textarea>
                    <div class="hint">
                        <i class="icon alert-triangle w-4 h-4"></i>
                        <span>Please review your input</span>
                    </div>
                </div>

<div class="textarea-field">
                    <label class="label">Disabled State</label>
                    <textarea class="textarea" placeholder="Disabled..." disabled>Cannot edit this</textarea>
                    <div class="hint">This field is disabled</div>
                </div>
            </div>

Character Counter - Track Input Length

Preview Code

Copy

Basic Counter:

Bio (optional)

72/200 CHARACTERS

Near Limit (Warning State):

252/280 CHARACTERS

At Limit (Error State):

Short Message

50/50 MAX

You've reached the character limit

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Basic Counter:</h4>
  <div class="textarea-field">
    <label class="label">
      <span>Bio</span>
      <span class="optional">(optional)</span>
    </label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea"
        placeholder="Tell us about yourself..."
        maxlength="200"
        data-counter="true"
        rows="4"
      >
Hello! I'm a developer who loves creating beautiful user interfaces.</textarea
      >
      <div class="counter">
        <span class="count">72/200</span>
        <span class="text-xs">CHARACTERS</span>
      </div>
    </div>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">Near Limit (Warning State):</h4>
  <div class="textarea-field">
    <label class="label">Tweet</label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea"
        placeholder="What's happening?"
        maxlength="280"
        data-counter="true"
        rows="3"
      >
This is a really long tweet that's getting close to the character limit. We need to be careful about how much more we write here because Twitter has strict limits on tweet length and we're running out of space quickly! Almost at the limit now...</textarea
      >
      <div class="counter warning">
        <span class="count">252/280</span>
        <span class="text-xs">CHARACTERS</span>
      </div>
    </div>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">At Limit (Error State):</h4>
  <div class="textarea-field error">
    <label class="label">Short Message</label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea"
        placeholder="Keep it brief..."
        maxlength="50"
        data-counter="true"
        rows="2"
      >
This message has reached the maximum character limit!</textarea
      >
      <div class="counter error">
        <span class="count">50/50</span>
        <span class="text-xs">MAX</span>
      </div>
    </div>
    <div class="hint">You've reached the character limit</div>
  </div>
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Basic Counter:</h4>
                <div class="textarea-field">
                    <label class="label">
                        <span>Bio</span>
                        <span class="optional">(optional)</span>
                    </label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea"
                            placeholder="Tell us about yourself..."
                            maxlength="200"
                            data-counter="true"
                            rows="4">Hello! I'm a developer who loves creating beautiful user interfaces.</textarea>
                        <div class="counter">
                            <span class="count">72/200</span>
                            <span class="text-xs">CHARACTERS</span>
                        </div>
                    </div>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">Near Limit (Warning State):</h4>
                <div class="textarea-field">
                    <label class="label">Tweet</label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea"
                            placeholder="What's happening?"
                            maxlength="280"
                            data-counter="true"
                            rows="3">This is a really long tweet that's getting close to the character limit. We need to be careful about how much more we write here because Twitter has strict limits on tweet length and we're running out of space quickly! Almost at the limit now...</textarea>
                        <div class="counter warning">
                            <span class="count">252/280</span>
                            <span class="text-xs">CHARACTERS</span>
                        </div>
                    </div>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">At Limit (Error State):</h4>
                <div class="textarea-field error">
                    <label class="label">Short Message</label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea"
                            placeholder="Keep it brief..."
                            maxlength="50"
                            data-counter="true"
                            rows="2">This message has reached the maximum character limit!</textarea>
                        <div class="counter error">
                            <span class="count">50/50</span>
                            <span class="text-xs">MAX</span>
                        </div>
                    </div>
                    <div class="hint">You've reached the character limit</div>
                </div>
            </div>

Auto-resize - Dynamic Height Adjustment

Preview Code

Copy

Grows as you type:

Auto-resize Text Area

This textarea will expand as you type (max height: 300px)

With character counter:

Combined Features

0/500 CHARACTERS

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Grows as you type:</h4>

  <div class="textarea-field">
    <label class="label">Auto-resize Text Area</label>
    <textarea
      class="textarea auto-resize"
      placeholder="Start typing and watch the textarea grow automatically..."
      data-autoresize="true"
      style="max-height: 300px"
      rows="2"
    >
Try adding more text here to see the auto-resize in action! The textarea will expand vertically as you add more content.</textarea
    >
    <div class="hint">This textarea will expand as you type (max height: 300px)</div>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">With character counter:</h4>
  <div class="textarea-field">
    <label class="label">Combined Features</label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea auto-resize"
        placeholder="Auto-resize with character counter..."
        data-autoresize="true"
        data-counter="true"
        maxlength="500"
        style="max-height: 400px"
        rows="3"
      ></textarea>
      <div class="counter">
        <span class="count">0/500</span>
        <span class="text-xs">CHARACTERS</span>
      </div>
    </div>
  </div>
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Grows as you type:</h4>

<div class="textarea-field">
                    <label class="label">Auto-resize Text Area</label>
                    <textarea
                        class="textarea auto-resize"
                        placeholder="Start typing and watch the textarea grow automatically..."
                        data-autoresize="true"
                        style="max-height: 300px;"
                        rows="2">Try adding more text here to see the auto-resize in action! The textarea will expand vertically as you add more content.</textarea>
                    <div class="hint">This textarea will expand as you type (max height: 300px)</div>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">With character counter:</h4>
                <div class="textarea-field">
                    <label class="label">Combined Features</label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea auto-resize"
                            placeholder="Auto-resize with character counter..."
                            data-autoresize="true"
                            data-counter="true"
                            maxlength="500"
                            style="max-height: 400px;"
                            rows="3"></textarea>
                        <div class="counter">
                            <span class="count">0/500</span>
                            <span class="text-xs">CHARACTERS</span>
                        </div>
                    </div>
                </div>
            </div>

Advanced Features - Complete Form Fields

Preview Code

Copy

Full-featured form field:

Project Requirements * Need help?

0/1000 CHARACTERS

Minimum 100 characters required. Be as specific as possible.

Read-only display:

Terms and Conditions

By using this service, you agree to our terms and conditions. This is a read-only field that displays important information that cannot be modified by the user. All rights reserved.

Fixed size (no resize handle):

Fixed Size Text Area

Resize handle is disabled

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Full-featured form field:</h4>

  <div class="textarea-field">
    <label class="label">
      <span>Project Requirements</span>
      <span class="required">*</span>
      <i class="info w-4 h-4" title="Describe your project requirements in detail"></i>
      <span class="help">Need help?</span>
    </label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea auto-resize"
        placeholder="Describe your project requirements in detail..."
        maxlength="1000"
        data-counter="true"
        data-autoresize="true"
        required
        rows="4"
      ></textarea>
      <div class="counter">
        <span class="count">0/1000</span>
        <span class="text-xs">CHARACTERS</span>
      </div>
    </div>
    <div class="hint">
      <i class="icon info-circle w-4 h-4"></i>
      <span>Minimum 100 characters required. Be as specific as possible.</span>
    </div>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">Read-only display:</h4>
  <div class="textarea-field">
    <label class="label">Terms and Conditions</label>
    <textarea class="textarea readonly" readonly rows="3">
By using this service, you agree to our terms and conditions. This is a read-only field that displays important information that cannot be modified by the user. All rights reserved.</textarea
    >
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">Fixed size (no resize handle):</h4>
  <div class="textarea-field">
    <label class="label">Fixed Size Text Area</label>
    <textarea
      class="textarea no-resize"
      placeholder="This textarea cannot be resized by dragging..."
      rows="3"
    ></textarea>
    <div class="hint">Resize handle is disabled</div>
  </div>
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Full-featured form field:</h4>

<div class="textarea-field">
                    <label class="label">
                        <span>Project Requirements</span>
                        <span class="required">*</span>
                        <i class="info w-4 h-4" title="Describe your project requirements in detail"></i>
                        <span class="help">Need help?</span>
                    </label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea auto-resize"
                            placeholder="Describe your project requirements in detail..."
                            maxlength="1000"
                            data-counter="true"
                            data-autoresize="true"
                            required
                            rows="4"></textarea>
                        <div class="counter">
                            <span class="count">0/1000</span>
                            <span class="text-xs">CHARACTERS</span>
                        </div>
                    </div>
                    <div class="hint">
                        <i class="icon info-circle w-4 h-4"></i>
                        <span>Minimum 100 characters required. Be as specific as possible.</span>
                    </div>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">Read-only display:</h4>
                <div class="textarea-field">
                    <label class="label">Terms and Conditions</label>
                    <textarea class="textarea readonly" readonly rows="3">By using this service, you agree to our terms and conditions. This is a read-only field that displays important information that cannot be modified by the user. All rights reserved.</textarea>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">Fixed size (no resize handle):</h4>
                <div class="textarea-field">
                    <label class="label">Fixed Size Text Area</label>
                    <textarea class="textarea no-resize" placeholder="This textarea cannot be resized by dragging..." rows="3"></textarea>
                    <div class="hint">Resize handle is disabled</div>
                </div>
            </div>

Container Inheritance - Bulk Sizing

Preview Code

Copy

Apply size to container for all children:

Individual override:

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Apply size to container for all children:</h4>

  <div class="textareas small space-y-2">
    <textarea
      class="textarea"
      placeholder="First small textarea inherited from container..."
    ></textarea>
    <textarea
      class="textarea"
      placeholder="Second small textarea inherited from container..."
    ></textarea>
    <textarea
      class="textarea"
      placeholder="Third small textarea inherited from container..."
    ></textarea>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">Individual override:</h4>
  <div class="textareas large space-y-2">
    <textarea class="textarea" placeholder="Large size from container..."></textarea>
    <textarea class="textarea tiny" placeholder="Override with tiny size..."></textarea>
    <textarea class="textarea" placeholder="Back to large from container..."></textarea>
  </div>
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Apply size to container for all children:</h4>

<h4 class="text-sm font-semibold mb-2 mt-4">Individual override:</h4>
                <div class="textareas large space-y-2">
                    <textarea class="textarea" placeholder="Large size from container..."></textarea>
                    <textarea class="textarea tiny" placeholder="Override with tiny size..."></textarea>
                    <textarea class="textarea" placeholder="Back to large from container..."></textarea>
                </div>
            </div>

Color Variants - Themed Inputs

Preview Code

Copy

Primary Color

Positive Color

Negative Color

Warning Color

Info Color

Purple Color

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
  <div class="textarea-field">
    <label class="label">Primary Color</label>
    <textarea class="textarea primary" placeholder="Primary themed..." rows="2"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Positive Color</label>
    <textarea class="textarea positive" placeholder="Positive themed..." rows="2"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Negative Color</label>
    <textarea class="textarea negative" placeholder="Negative themed..." rows="2"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Warning Color</label>
    <textarea class="textarea warning" placeholder="Warning themed..." rows="2"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Info Color</label>
    <textarea class="textarea info" placeholder="Info themed..." rows="2"></textarea>
  </div>

  <div class="textarea-field">
    <label class="label">Purple Color</label>
    <textarea class="textarea purple" placeholder="Purple themed..." rows="2"></textarea>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                
                <div class="textarea-field">
                    <label class="label">Primary Color</label>
                    <textarea class="textarea primary" placeholder="Primary themed..." rows="2"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Positive Color</label>
                    <textarea class="textarea positive" placeholder="Positive themed..." rows="2"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Negative Color</label>
                    <textarea class="textarea negative" placeholder="Negative themed..." rows="2"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Warning Color</label>
                    <textarea class="textarea warning" placeholder="Warning themed..." rows="2"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Info Color</label>
                    <textarea class="textarea info" placeholder="Info themed..." rows="2"></textarea>
                </div>

<div class="textarea-field">
                    <label class="label">Purple Color</label>
                    <textarea class="textarea purple" placeholder="Purple themed..." rows="2"></textarea>
                </div>
            </div>

Validation - Real-time Feedback

Preview Code

Copy

Required field validation:

Feedback *

Leave blank and blur to see validation

With minimum length:

Detailed Description *

0/500 MIN 50

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Required field validation:</h4>

  <div class="textarea-field">
    <label class="label">
      <span>Feedback</span>
      <span class="required">*</span>
    </label>
    <textarea
      class="textarea"
      placeholder="This field is required..."
      required
      data-validate="true"
      rows="3"
    ></textarea>
    <div class="hint">Leave blank and blur to see validation</div>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">With minimum length:</h4>
  <div class="textarea-field">
    <label class="label">
      <span>Detailed Description</span>
      <span class="required">*</span>
    </label>
    <div class="textarea-wrapper with-counter">
      <textarea
        class="textarea"
        placeholder="Minimum 50 characters required..."
        minlength="50"
        maxlength="500"
        data-counter="true"
        required
        rows="3"
      ></textarea>
      <div class="counter">
        <span class="count">0/500</span>
        <span class="text-xs">MIN 50</span>
      </div>
    </div>
  </div>
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Required field validation:</h4>

<div class="textarea-field">
                    <label class="label">
                        <span>Feedback</span>
                        <span class="required">*</span>
                    </label>
                    <textarea
                        class="textarea"
                        placeholder="This field is required..."
                        required
                        data-validate="true"
                        rows="3"></textarea>
                    <div class="hint">Leave blank and blur to see validation</div>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">With minimum length:</h4>
                <div class="textarea-field">
                    <label class="label">
                        <span>Detailed Description</span>
                        <span class="required">*</span>
                    </label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            class="textarea"
                            placeholder="Minimum 50 characters required..."
                            minlength="50"
                            maxlength="500"
                            data-counter="true"
                            required
                            rows="3"></textarea>
                        <div class="counter">
                            <span class="count">0/500</span>
                            <span class="text-xs">MIN 50</span>
                        </div>
                    </div>
                </div>
            </div>

JavaScript API - Programmatic Control

Preview Code

Copy

Interactive Demo:

Demo Text Area

0/200 CHARACTERS

Click buttons below to test API methods

Available Methods:

// Initialize all text areas
TextArea.init();

// Update character counter
TextArea.updateCounter(textarea);

// Trigger resize for auto-resize
TextArea.resize(textarea);

// Set value and update UI
TextArea.setValue(textarea, "New value");

// Set error state with message
TextArea.setError(textarea, "This field is required");

// Clear error state
TextArea.clearError(textarea);

// Set success state with message
TextArea.setSuccess(textarea, "Valid input!");

// Clear all states
TextArea.clearState(textarea);

// Initialize specific features
TextArea.initCharacterCounters();
TextArea.initAutoResize();
TextArea.initValidation();

<div class="space-y-3">
  <h4 class="text-sm font-semibold mb-2">Interactive Demo:</h4>

  <div class="textarea-field" id="demo-field">
    <label class="label">Demo Text Area</label>
    <div class="textarea-wrapper with-counter">
      <textarea
        id="demo-textarea"
        class="textarea"
        placeholder="Used for API demonstration..."
        maxlength="200"
        data-counter="true"
        rows="3"
      ></textarea>
      <div class="counter">
        <span class="count">0/200</span>
        <span class="text-xs">CHARACTERS</span>
      </div>
    </div>
    <div class="hint">Click buttons below to test API methods</div>
  </div>

  <div class="flex flex-wrap gap-2">
    <button
      class="btn btn-sm"
      onclick="TextArea.setValue(document.getElementById('demo-textarea'), 'Hello from API!')"
    >
      Set Value
    </button>
    <button
      class="btn btn-sm positive"
      onclick="TextArea.setSuccess(document.getElementById('demo-textarea'), 'Valid!')"
    >
      Set Success
    </button>
    <button
      class="btn btn-sm negative"
      onclick="TextArea.setError(document.getElementById('demo-textarea'), 'Error!')"
    >
      Set Error
    </button>
    <button
      class="btn btn-sm"
      onclick="TextArea.clearState(document.getElementById('demo-textarea'))"
    >
      Clear State
    </button>
    <button
      class="btn btn-sm"
      onclick="document.getElementById('demo-textarea').value = ''; TextArea.updateCounter(document.getElementById('demo-textarea'))"
    >
      Clear
    </button>
  </div>

  <h4 class="text-sm font-semibold mb-2 mt-4">Available Methods:</h4>
  <pre class="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
// Initialize all text areas
TextArea.init();

// Update character counter
TextArea.updateCounter(textarea);

// Trigger resize for auto-resize
TextArea.resize(textarea);

// Set value and update UI
TextArea.setValue(textarea, "New value");

// Set error state with message
TextArea.setError(textarea, "This field is required");

// Clear error state
TextArea.clearError(textarea);

// Set success state with message
TextArea.setSuccess(textarea, "Valid input!");

// Clear all states
TextArea.clearState(textarea);

// Initialize specific features
TextArea.initCharacterCounters();
TextArea.initAutoResize();
TextArea.initValidation();</pre
  >
</div>

<div class="space-y-3">
                <h4 class="text-sm font-semibold mb-2">Interactive Demo:</h4>

<div class="textarea-field" id="demo-field">
                    <label class="label">Demo Text Area</label>
                    <div class="textarea-wrapper with-counter">
                        <textarea
                            id="demo-textarea"
                            class="textarea"
                            placeholder="Used for API demonstration..."
                            maxlength="200"
                            data-counter="true"
                            rows="3"></textarea>
                        <div class="counter">
                            <span class="count">0/200</span>
                            <span class="text-xs">CHARACTERS</span>
                        </div>
                    </div>
                    <div class="hint">Click buttons below to test API methods</div>
                </div>

<div class="flex flex-wrap gap-2">
                    <button class="btn btn-sm" onclick="TextArea.setValue(document.getElementById('demo-textarea'), 'Hello from API!')">Set Value</button>
                    <button class="btn btn-sm positive" onclick="TextArea.setSuccess(document.getElementById('demo-textarea'), 'Valid!')">Set Success</button>
                    <button class="btn btn-sm negative" onclick="TextArea.setError(document.getElementById('demo-textarea'), 'Error!')">Set Error</button>
                    <button class="btn btn-sm" onclick="TextArea.clearState(document.getElementById('demo-textarea'))">Clear State</button>
                    <button class="btn btn-sm" onclick="document.getElementById('demo-textarea').value = ''; TextArea.updateCounter(document.getElementById('demo-textarea'))">Clear</button>
                </div>

<h4 class="text-sm font-semibold mb-2 mt-4">Available Methods:</h4>
                <pre class="bg-gray-100 p-3 rounded text-xs overflow-x-auto">// Initialize all text areas
TextArea.init();

// Update character counter
TextArea.updateCounter(textarea);

// Trigger resize for auto-resize
TextArea.resize(textarea);

// Set value and update UI
TextArea.setValue(textarea, "New value");

// Set error state with message
TextArea.setError(textarea, "This field is required");

// Clear error state
TextArea.clearError(textarea);

// Set success state with message
TextArea.setSuccess(textarea, "Valid input!");

// Clear all states
TextArea.clearState(textarea);

// Initialize specific features
TextArea.initCharacterCounters();
TextArea.initAutoResize();
TextArea.initValidation();</pre>
            </div>

Usage Guidelines

When to Use Text Areas

Preview Code

Copy

Multi-line Input: When users need to enter more than one line of text
Long-form Content: For comments, descriptions, feedback, or messages
Structured Text: When users might use line breaks for formatting
Character Limits: When you need to enforce and display text length constraints
Variable Content: When content length varies significantly between users

<div class="prose prose-sm max-w-none">
  <ul class="list-disc pl-5 space-y-2">
    <li><strong>Multi-line Input:</strong> When users need to enter more than one line of text</li>
    <li><strong>Long-form Content:</strong> For comments, descriptions, feedback, or messages</li>
    <li><strong>Structured Text:</strong> When users might use line breaks for formatting</li>
    <li>
      <strong>Character Limits:</strong> When you need to enforce and display text length
      constraints
    </li>
    <li>
      <strong>Variable Content:</strong> When content length varies significantly between users
    </li>
  </ul>
</div>

Best Practices

Preview Code

Copy

Sizing: Set appropriate initial rows based on expected content
Auto-resize: Enable for better UX when content length varies
Character Counters: Always show for fields with limits
Placeholders: Provide helpful examples or format hints
Labels: Always include clear, descriptive labels
Validation: Provide immediate feedback for errors
Hints: Add helper text for complex requirements

<div class="prose prose-sm max-w-none">
  <ul class="list-disc pl-5 space-y-2">
    <li><strong>Sizing:</strong> Set appropriate initial rows based on expected content</li>
    <li><strong>Auto-resize:</strong> Enable for better UX when content length varies</li>
    <li><strong>Character Counters:</strong> Always show for fields with limits</li>
    <li><strong>Placeholders:</strong> Provide helpful examples or format hints</li>
    <li><strong>Labels:</strong> Always include clear, descriptive labels</li>
    <li><strong>Validation:</strong> Provide immediate feedback for errors</li>
    <li><strong>Hints:</strong> Add helper text for complex requirements</li>
  </ul>
</div>

Accessibility Considerations

Preview Code

Copy

Labels: Always associate labels with textareas using proper HTML structure
Required Fields: Mark clearly with both visual and semantic indicators
Error Messages: Ensure they're programmatically associated with the field
Keyboard Support: All features must be keyboard accessible
Screen Readers: Use aria-describedby for hints and error messages
Color Contrast: Ensure sufficient contrast in all states
Focus Indicators: Maintain clear, visible focus states

<div class="prose prose-sm max-w-none">
  <ul class="list-disc pl-5 space-y-2">
    <li>
      <strong>Labels:</strong> Always associate labels with textareas using proper HTML structure
    </li>
    <li><strong>Required Fields:</strong> Mark clearly with both visual and semantic indicators</li>
    <li>
      <strong>Error Messages:</strong> Ensure they're programmatically associated with the field
    </li>
    <li><strong>Keyboard Support:</strong> All features must be keyboard accessible</li>
    <li><strong>Screen Readers:</strong> Use aria-describedby for hints and error messages</li>
    <li><strong>Color Contrast:</strong> Ensure sufficient contrast in all states</li>
    <li><strong>Focus Indicators:</strong> Maintain clear, visible focus states</li>
  </ul>
</div>