blatui

Components

Autosize Textarea

A textarea that grows and shrinks to fit its content, with an optional max-rows cap.

php artisan blatui:add autosize-textarea 
<div class="grid w-full max-w-sm gap-2">
    <x-ui.label for="autosize-message">Your message</x-ui.label>
    <x-ui.autosize-textarea id="autosize-message" name="message" placeholder="Type your message — this grows as you write…" />
</div>

Max Rows

After six lines the field stops growing and scrolls.

<div class="grid w-full max-w-sm gap-2">
    <x-ui.label for="autosize-capped">Capped at 6 rows</x-ui.label>
    <x-ui.autosize-textarea
        id="autosize-capped"
        name="capped"
        :max-rows="6"
        placeholder="Grows up to 6 rows, then scrolls…"
    />
    <p class="text-muted-foreground text-sm">After six lines the field stops growing and scrolls.</p>
</div>

Prefilled

@php
    $notes = "- Fixed the layout shift on mobile.\n- Added a dark-mode toggle to settings.\n- Improved keyboard navigation in dialogs.\n- Bumped dependencies and tidied the changelog.";
@endphp

<div class="grid w-full max-w-sm gap-2">
    <x-ui.label for="autosize-prefilled">Release notes</x-ui.label>
    <x-ui.autosize-textarea id="autosize-prefilled" name="notes" :value="$notes" />
</div>