Textarea

Textarea Component

The Textarea component provides a styled multi-line text input area with optional label, hint text, validation error display, icon, and tooltip support. It automatically handles unique IDs for accessibility and integrates with Livewire for validation messages.

Example Usage

<x-textarea label="Description" hint="Enter your detailed description here" icon="icon-bell" tooltip="This is a tooltip" required>
    Initial content goes here
</x-textarea>

Props

• label (string|null)
  The text label displayed above the textarea. If not provided, no label is shown.

• hint (string|null)
  Optional helper text shown below the textarea for additional context or instructions.

• showRequired (bool, default: true)
  Controls whether a red asterisk (*) is displayed next to the label when the textarea is required.

• showValidation (bool, default: true)
  Enables showing validation error messages below the textarea if errors exist for the bound model.

• icon (string|null)
  CSS class name(s) for an icon displayed inside the textarea on the left side.

• tooltip (string|null)
  Tooltip text displayed when hovering over the textarea.

Overview

This Textarea component is a flexible input area designed for multi-line text input, enhanced with accessibility features such as automatic unique IDs and optional labels. It supports optional icons inside the input area, tooltips, hint text for guidance, and validation feedback integrated with Livewire. Styled with Tailwind CSS, it supports dark mode and various interaction states including focus and disabled.