Displays a list of options for the user to pick from.
<x-portal::select name="fruit">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blueberry">Blueberry</option>
<option value="grapes">Grapes</option>
<option value="pineapple">Pineapple</option>
</x-portal::select>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:select --force
<x-portal::select name="fruit" invalid>
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blueberry">Blueberry</option>
<option value="grapes">Grapes</option>
<option value="pineapple">Pineapple</option>
</x-portal::select>
<x-portal::select name="fruit" size="sm">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</x-portal::select>
<x-portal::select name="fruit">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</x-portal::select>
<x-portal::select name="fruit" size="lg">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</x-portal::select>
<x-portal::select name="fruit" size="xl">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</x-portal::select>
<div class="grid w-full max-w-sm items-center gap-1.5">
<x-portal::label htmlFor="fruit">Email</x-portal::label>
<x-portal::select id="fruit" name="fruit">
<option value="Select a fruit" selected disabled>
Select a fruit
</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</x-portal::select>
</div>
<x-portal::select name="fruit" disabled>
<option value="apple">Apple</option>
<option value="pineapple">Pineapple</option>
</x-portal::select>