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>
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
<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>