BlatUI

Components

Input Group

Group inputs with text, buttons, icons, and more.

php artisan blatui:add input-group 
<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.input-group-input placeholder="Search..." />
        <x-ui.input-group-addon>
            <x-lucide-search />
        </x-ui.input-group-addon>
    </x-ui.input-group>
</div>

Textarea

0/280 
<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.textarea data-slot="input-group-control" placeholder="Send a message..." class="min-h-20 resize-none border-0 shadow-none focus-visible:ring-0" />
        <x-ui.input-group-addon align="block-end">
            <x-ui.input-group-text class="ml-auto">0/280</x-ui.input-group-text>
            <x-ui.input-group-button variant="default">Send</x-ui.input-group-button>
        </x-ui.input-group-addon>
    </x-ui.input-group>
</div>

With Button

<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.input-group-input placeholder="Enter your email" />
        <x-ui.input-group-addon align="inline-end">
            <x-ui.input-group-button variant="default">Subscribe</x-ui.input-group-button>
        </x-ui.input-group-addon>
    </x-ui.input-group>
</div>

With Text

https:// 
<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.input-group-addon>
            <x-ui.input-group-text>https://</x-ui.input-group-text>
        </x-ui.input-group-addon>
        <x-ui.input-group-input placeholder="example.com" />
    </x-ui.input-group>
</div>