Portal UI

Select

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>

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:select --force


Invalid 

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


Size 

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


With Label 

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


Disabled 

<x-portal::select name="fruit" disabled>
    <option value="apple">Apple</option>
    <option value="pineapple">Pineapple</option>
</x-portal::select>