Textarea
Multi-line text input component with auto-resize functionality
Basic Usage
The most basic textarea component:
Description
<neura::field>
<neura::label>Description</neura::label>
<neura::textarea placeholder="Enter your description..." />
</neura::field>With Livewire
Use
wire:model or x-model to bind the value to a Livewire property:
Message
<neura::textarea wire:model="message" placeholder="Enter your message..." />
// In your Livewire component:
public $message = '';Rows
Control the initial height using the
rows prop. The textarea will auto-resize as you type:
Small (3 rows)
Medium (5 rows)
Large (8 rows)
<neura::textarea rows="3" placeholder="Start typing..." />
<neura::textarea rows="5" placeholder="Start typing..." />
<neura::textarea rows="8" placeholder="Start typing..." />Resize Options
Control how users can resize the textarea using the
resize prop:
Vertical Resize (Default)
Horizontal Resize
Both Directions
No Resize
<neura::textarea resize="vertical" rows="4" />
<neura::textarea resize="horizontal" rows="4" />
<neura::textarea resize="both" rows="4" />
<neura::textarea resize="none" rows="4" />Auto Resize
The textarea automatically grows as you type. It maintains a minimum height based on the
rows prop and expands as needed:
Auto-resizing Textarea
With Validation
Show validation errors using the
invalid prop:
Description
<neura::field>
<neura::label>Description</neura::label>
<neura::textarea invalid="true" rows="4" />
<neura::error>Description must be at least 10 characters long</neura::error>
</neura::field>Disabled State
Disable the textarea using the
disabled prop:
Disabled Textarea
<neura::textarea disabled="true" rows="4" />Use Cases
Comment Form
Add a Comment
Product Description
Product Description
Bio/About Section
Bio
Best Practices
Do
- Use appropriate row count based on expected content length
- Provide clear placeholder text to guide users
- Allow auto-resize for better user experience
- Use validation for required fields
- Consider character limits for long text inputs
- Use
resize="vertical"orresize="none"for better layout control
Don't
- Use too many rows for short text inputs
- Forget to validate long text inputs on the server
- Allow unlimited resize in constrained layouts
- Use textarea for single-line inputs (use input instead)
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| rows | int|null | 3 | Initial number of rows (minimum height) |
| resize | string | 'vertical' | Resize behavior: 'none', 'vertical', 'horizontal', or 'both' |
| disabled | bool | false | Disable the textarea |
| invalid | bool|null | null | Mark the textarea as invalid |
| name | string | auto | Name attribute (auto-detected from wire:model/x-model) |