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>