#Textarea Component

#Introduction

The textarea component provides a fully featured multi-line text input with automatic resizing, validation states, and modern styling. It saves you from creating complex textarea elements each time you need one.

#Installation

Use the fluxtor artisan command to install the textarea component easily:

php artisan fluxtor:install textarea

#Basic Usage

<x-ui.textarea 
    wire:model="description" 
    placeholder="Enter your description..."
/>

#Customization

#Rows

The textarea component uses 3 rows as the default, but you can adjust the initial size to meet your needs.

<x-ui.textarea 
    wire:model="smallText" 
    placeholder="Small textarea"
    rows="2"
/>
<x-ui.textarea 
    wire:model="defaultText" 
    placeholder="Default size (3 rows)"
/>
<x-ui.textarea 
    wire:model="largeText" 
    placeholder="Large textarea"
    rows="6"
/>

#Resize Options

Control how users can resize the textarea. The default behavior is vertical resizing.

<x-ui.textarea 
    wire:model="noResize" 
    placeholder="No resizing allowed"
    resize="none"
/>
<x-ui.textarea 
    wire:model="verticalResize" 
    placeholder="Vertical resizing (default)"
    resize="vertical"
/>
<x-ui.textarea 
    wire:model="horizontalResize" 
    placeholder="Horizontal resizing"
    resize="horizontal"
/>
<x-ui.textarea 
    wire:model="bothResize" 
    placeholder="Both directions"
    resize="both"
/>

#States

The component supports different states including disabled and validation states.

<x-ui.textarea 
    wire:model="normalState" 
    placeholder="Normal state"
/>
<x-ui.textarea 
    wire:model="disabledState" 
    placeholder="Disabled state"
    disabled
/>
<x-ui.textarea 
    wire:model="invalidState" 
    placeholder="Invalid state"
    invalid
/>

#Auto-Resizing

The textarea automatically adjusts its height to fit the content as you type, providing a smooth user experience.

we use javascript for this feature, so it work in all browsers

<x-ui.textarea 
    wire:model="autoResizeText" 
    placeholder="Start typing to see the auto-resize in action..."
    rows="3"
/>

#Component Props