Textarea - Laravel Blade

Use the textarea component for multi-line text input fields with support for labels, helper text, validation states, and a comment box layout with a footer slot.

Default Textarea

Blade code

<div class="max-w-md">
    <x-fwb.textarea label="Your message" placeholder="Write your thoughts here..." />
</div>

Comment Box

Remember, contributions should follow our Community Guidelines.

Blade code

<div class="max-w-md">
    <x-fwb.textarea label="Your comment" placeholder="Write a comment...">
        <x-slot:footer>
            <button type="submit" class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
                Post comment
            </button>
            <p class="text-xs text-gray-500 dark:text-gray-400 ms-auto">Remember, contributions should follow our <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
        </x-slot:footer>
    </x-fwb.textarea>
</div>

Validation States

Well done! Your message looks great.

Please provide a longer message.

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.textarea label="Success" color="green" placeholder="Write here..." helper="Well done! Your message looks great." />
    <x-fwb.textarea label="Error" color="red" placeholder="Write here..." helper="Please provide a longer message." />
</div>

Helper Text

We will never share your message with anyone.

Blade code

<div class="max-w-md">
    <x-fwb.textarea label="Your message" placeholder="Write your thoughts here..." helper="We will never share your message with anyone." />
</div>

Disabled State

Blade code

<div class="max-w-md">
    <x-fwb.textarea label="Disabled textarea" placeholder="You cannot type here..." :disabled="true" />
</div>

Custom Rows

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.textarea label="Short textarea" placeholder="Brief message..." :rows="2" />
    <x-fwb.textarea label="Tall textarea" placeholder="Detailed description..." :rows="8" />
</div>

Component Properties

Textarea x-fwb.textarea

Prop Type Default Description
id string auto Unique identifier for the textarea. Auto-generated if not provided.
label string|null null Label text displayed above the textarea.
placeholder string|null null Placeholder text shown when the textarea is empty.
rows int 4 Number of visible text rows.
helper string|null null Helper text displayed below the textarea.
color string default Validation color state: default, green (success), or red (error).
disabled bool false Disable the textarea.
required bool false Mark the textarea as required.
footer slot - Named slot for footer content below the textarea, useful for comment box layouts with buttons.