Portal UI

Combobox

Autocomplete input and command palette with a list of suggestions.

<x-portal::combobox placeholder="Select framework..." name="framework" class="w-[300px]">
    <x-portal::combobox.search placeholder="Search framework..." />
    <x-portal::combobox.content>
        <x-portal::combobox.option value="indonesia" selected>
            <x-tabler-bed-filled />
            Indonesia
        </x-portal::combobox.option>
        <x-portal::combobox.option value="next">Next.js</x-portal::combobox.option>
        @for($i = 0; $i < 60; $i++)
            @php 
                $name=  fake()->name;
            @endphp
            <x-portal::combobox.option
                value="{{ $name }}"
            >
                {{ $name }}
            </x-portal::combobox.option>
        @endfor
    </x-portal::combobox.content>
</x-portal::combobox>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:combobox --force


Without Search

<x-portal::combobox placeholder="Select framework..." name="framework" class="w-[300px]">
    <x-portal::combobox.content>
        <x-portal::combobox.option value="indonesia">
            <x-tabler-bed-filled />
            Indonesia
        </x-portal::combobox.option>
        <x-portal::combobox.option value="next">Next.js</x-portal::combobox.option>
        @for($i = 0; $i < 60; $i++)
            @php 
                $name=  fake()->name;
            @endphp
            <x-portal::combobox.option
                value="{{ $name }}"
            >
                {{ $name }}
            </x-portal::combobox.option>
        @endfor
    </x-portal::combobox.content>
</x-portal::combobox>