Textareas
Textareas are multi-line inputs that allow users to enter longer text.
1<x-textarea label="Description" />Placeholder
Add a placeholder to the textarea to provide more context to the user.
1<x-textarea placeholder="Descibe the product…" />Adjust Rows
Set the number of rows to control the height of the textarea.
1<x-textarea rows="5" />2<x-textarea rows="auto" />Limit Resizing
Limit the resizing of the textarea.
1<x-textarea resize="none" placeholder="Resize disabled" />2<x-textarea resize="vertical" placeholder="Resize vertically" /> <!-- Default value -->3<x-textarea max-height="150" placeholder="Maximum height of 150px" />Loading States
Make textareas appear as loading to indicate that something is happening.
1<x-textarea wire:loading />Sizes
Textareas can be small, medium, or large.
1<x-textarea size="sm" rows="2">Small Textarea</x-textarea>2<x-textarea size="md" rows="3">Medium Textarea</x-textarea>3<x-textarea size="lg" rows="4">Large Textarea</x-textarea>Disabled State
Disable textareas to prevent users from interacting with them.
1<x-textarea label="Description" disabled />Read-Only State
Make textareas read-only to prevent users from editing them.
1<x-textarea label="Description" readonly />Hint Text
Add hint text to the textarea to help users understand what to input.
1<x-textarea label="Your bio" hint="Tell us more about yourself" />Label Addons
Add anything you want to the label of the textarea.
1<x-textarea label="Your bio"> 2 <x-slot:labelAddon> 3 <x-dropdown id="bio-generator"> 4 <x-slot:toggle size="sm" type="link">Use AI</x-slot:toggle> 5 6 <x-button type="transparent" icon-end="arrow-path--micro">Generate bio</x-button> 7 <x-button type="transparent" icon-end="face-smile--micro">Change tone</x-button> 8 <hr> 9 <x-button type="danger" size="sm" icon="x-mark--micro">Remove bio</x-button>10 </x-dropdown>11 </x-slot:labelAddon>12</x-textarea>Descriptions
Add a description to the textarea to provide more context to the user.
1<x-textarea label="Feedback" description="Please provide feedback on the product." />Descriptions with custom HTML
Use custom HTML in the description to add icons or other elements.
1<x-textarea label="Feedback">2 <x-slot:description> 3 <x-icon name="heart--mini" class="text-red-400" />4 <span class="text-red-300">We'd love to hear your thoughts on the product.</span>5 </x-slot:description>6</x-textarea>Error States
Textareas automatically display an error state when the wire:model property is set.
1<x-textarea wire:model="bio_example" label="Bio" />