Skip to content

Overview

The <x-aura::textarea> component renders a styled multi-line text input field. It supports labels, placeholder text, hint messages, validation error display, character counting with maxlength enforcement, and Alpine.js-powered auto-resize behavior. The component integrates seamlessly with Livewire via wire:model.

Basic Usage

<x-aura::textarea label="Description" name="description" placeholder="Enter a description..." />

Props

Prop Type Default Description
label string|null null Label text displayed above the textarea.
placeholder string|null null Placeholder text shown when the textarea is empty.
hint string|null null Help text displayed below the textarea. Hidden when an error is present.
error string|null null Error message displayed below the textarea, applying error styling.
rows int 3 Number of visible text rows.
autoResize bool false When true, the textarea automatically grows in height as the user types.
characterCount bool false When true and maxlength is set, displays a live character counter.
maxlength int|null null Maximum number of characters allowed.
disabled bool false Disables the textarea, preventing user input.
readonly bool false Makes the textarea read-only.
size string 'md' Size variant. Options: sm, md, lg.

Variants / Examples

With Livewire Binding

<x-aura::textarea
    label="Notes"
    wire:model="notes"
    placeholder="Add your notes here..."
    rows="4"
/>

With Error State

The bio field is required.

<x-aura::textarea
    label="Bio"
    name="bio"
    error="The bio field is required."
    rows="3"
/>

Character Count with Maxlength

0/200 
<x-aura::textarea
    label="Short Description"
    name="short_description"
    placeholder="Describe your product..."
    :maxlength="200"
    :characterCount="true"
    rows="3"
/>

Auto-Resize Textarea

<x-aura::textarea
    label="Message"
    wire:model="message"
    placeholder="Type your message... The field will grow as you type."
    :autoResize="true"
    rows="2"
/>

Feedback Form

Minimum 20 characters

<form wire:submit="submitFeedback">
    <div class="space-y-4">
        <x-aura::input label="Subject" wire:model="subject" />

        <x-aura::textarea
            label="Your Feedback"
            wire:model="feedback"
            placeholder="Tell us what you think..."
            :maxlength="1000"
            :characterCount="true"
            :autoResize="true"
            rows="4"
            hint="Be as detailed as possible."
        />

        <x-aura::button type="submit">Submit Feedback</x-aura::button>
    </div>
</form>

Disabled and Readonly States

<x-aura::textarea
    label="System Log"
    :readonly="true"
    rows="5"
    value="[2026-02-15] Application started successfully."
/>

<x-aura::textarea
    label="Archived Notes"
    :disabled="true"
    rows="3"
    value="This content cannot be modified."
/>

Accessibility

  • When a label prop is provided, a <label> element is rendered and visually associated with the textarea.
  • Error messages are displayed below the field with the aura-input-error-text class, providing clear visual feedback. For full ARIA support, add aria-describedby pointing to the error element's id.
  • The disabled and readonly attributes are applied natively to the <textarea> element.
  • The character counter provides a real-time text indicator. For screen reader announcements on count changes, consider wrapping the counter in an aria-live="polite" region.
  • All additional HTML attributes (including aria-*, id, required) are forwarded to the <textarea> element via Blade's attribute bag.