Textarea Component

The Textarea component provides a styled multi-line text input with support for error states, disabled states, and full dark mode compatibility. It's designed to work seamlessly with forms and Livewire.

Usage

Use the textarea component for multi-line text input:

<x-text-area 
    name="description" 
    rows="4" 
    placeholder="Enter your description..."
/>

With Label

Combine with the input label component for accessible forms:

<div class="space-y-1">
    <x-input-label for="message" value="Message" />
    <x-text-area 
        id="message" 
        name="message" 
        rows="4" 
        placeholder="Your message..."
    />
</div>

Error State

Show validation errors using the error prop:

<div class="space-y-1">
    <x-input-label for="bio" value="Bio" :error="true" />
    <x-text-area 
        id="bio" 
        name="bio" 
        rows="3" 
        :error="true"
        placeholder="Tell us about yourself..."
    />
    <x-input-error :messages="['This field is required.']" />
</div>
  • Error: This field is required.

Livewire Integration

Use with Livewire for reactive forms:

<x-text-area 
    wire:model="description" 
    name="description" 
    rows="4" 
    placeholder="Enter description..."
/>

In your Livewire component:

class CreatePost extends Component
{
    public string $description = '';

    public function save()
    {
        $this->validate([
            'description' => 'required|min:10',
        ]);
        
        // Save logic
    }
}

Props Reference

Prop Type Default Description
disabled bool false Whether the textarea is disabled
error bool false Whether to show error styling (red border)

Standard Textarea Attributes

The component also accepts all standard textarea attributes:

  • name — Input name for form submission
  • id — Unique identifier
  • rows — Number of visible text rows
  • cols — Number of visible character columns
  • placeholder — Placeholder text
  • required — Whether the field is required
  • maxlength — Maximum character length
  • readonly — Makes the textarea read-only
  • wire:model — Livewire property binding

References

Category Path / Name Description
Component resources/views/components/text-area.blade.php Textarea component file

For the detailed documentation, please visit the Penguin UI Textareas.