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>

Icon End

⌘K

<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.input-group-addon>
            <x-lucide-search aria-hidden="true" />
        </x-ui.input-group-addon>
        <x-ui.input-group-input placeholder="Search documentation..." aria-label="Search" />
        <x-ui.input-group-addon align="inline-end">
            <x-ui.input-group-text>⌘K</x-ui.input-group-text>
        </x-ui.input-group-addon>
    </x-ui.input-group>
</div>

Password

<div class="w-full max-w-sm" x-data="{ show: false }">
    <x-ui.input-group>
        <x-ui.input-group-input type="password" x-bind:type="show ? 'text' : 'password'" placeholder="Password" autocomplete="current-password" aria-label="Password" />
        <x-ui.input-group-addon align="inline-end">
            <x-ui.input-group-button size="icon-xs" @click="show = !show" aria-label="Show password" x-bind:aria-label="show ? 'Hide password' : 'Show password'" x-bind:aria-pressed="show.toString()">
                <x-lucide-eye x-show="!show" aria-hidden="true" />
                <x-lucide-eye-off x-show="show" x-cloak aria-hidden="true" />
            </x-ui.input-group-button>
        </x-ui.input-group-addon>
    </x-ui.input-group>
</div>

Spinner

<div class="w-full max-w-sm">
    <x-ui.input-group>
        <x-ui.input-group-input placeholder="Searching…" disabled aria-label="Search" />
        <x-ui.input-group-addon align="inline-end">
            <x-ui.spinner />
        </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>

API Reference

Props, slots and exposed methods for <x-ui.input-group>.

Slots

Slot	Description
`default`	The grouped controls: an x-ui.input-group-input (or input-group-text textarea) plus one or more x-ui.input-group-addon wrappers holding icons, text, buttons or kbd hints. The group shares a single bordered shell that highlights when the control inside is focused.