Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add textarea

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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..." />
<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

<x-aura::textarea
    label="Bio"
    name="bio"
    error="The bio field is required."
    rows="3"
/>
<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"
/>
<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="Notes"
    placeholder="Start typing and the textarea will grow..."
    :autoResize="true"
/>
<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

<div class="space-y-4 max-w-md">
    <x-aura::textarea
        label="Your Feedback"
        placeholder="Tell us what you think..."
        hint="Minimum 20 characters"
        :maxlength="500"
    />
    <x-aura::button type="submit">Send Feedback</x-aura::button>
</div>
<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."
/>
<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.