Livewire Components

Select

Displays a list of options for the user to pick from. 

<x-select class="w-[180px]">
    <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-select>

Installation

php artisan vendor:publish --tag=select --force

Usage

<x-select class="w-[180px]">
    <option
        value="Theme"
        selected
        disabled
    >
        Theme
    </option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
    <option value="system">System</option>
</x-select>

Examples

Scrollable

<x-select class="w-[280px]">
    <optgroup label="North America">
        <option value="est">Eastern Standard Time (EST)</option>
        <option value="cst">Central Standard Time (CST)</option>
        <option value="mst">Mountain Standard Time (MST)</option>
        <option value="pst">Pacific Standard Time (PST)</option>
        <option value="akst">Alaska Standard Time (AKST)</option>
        <option value="hst">Hawaii Standard Time (HST)</option>
    </optgroup>
    <optgroup label="Europe & Africa">
        <option value="gmt">Greenwich Mean Time (GMT)</option>
        <option value="cet">Central European Time (CET)</option>
        <option value="eet">Eastern European Time (EET)</option>
        <option value="west">
            Western European Summer Time (WEST)
        </option>
        <option value="cat">Central Africa Time (CAT)</option>
        <option value="eat">East Africa Time (EAT)</option>
    </optgroup>
    <optgroup label="Asia">
        <option value="msk">Moscow Time (MSK)</option>
        <option value="ist">India Standard Time (IST)</option>
        <option value="cst_china">China Standard Time (CST)</option>
        <option value="jst">Japan Standard Time (JST)</option>
        <option value="kst">Korea Standard Time (KST)</option>
        <option value="ist_indonesia">
            Indonesia Central Standard Time (WITA)
        </option>
    </optgroup>
    <optgroup label="Australia & Pacific">
        <option value="awst">
            Australian Western Standard Time (AWST)
        </option>
        <option value="acst">
            Australian Central Standard Time (ACST)
        </option>
        <option value="aest">
            Australian Eastern Standard Time (AEST)
        </option>
        <option value="nzst">New Zealand Standard Time (NZST)</option>
        <option value="fjt">Fiji Time (FJT)</option>
    </optgroup>
    <optgroup label="South America">
        <option value="art">Argentina Time (ART)</option>
        <option value="bot">Bolivia Time (BOT)</option>
        <option value="brt">Brasilia Time (BRT)</option>
        <option value="clt">Chile Standard Time (CLT)</option>
    </optgroup>
</x-select>

Form

You can manage verified email addresses in your email settings . 

<x-form>
    <x-form.item>
        <x-form.label>Email</x-form.label>
        <x-select x-form:control>
            <option
                value="Select a verified email to display"
                disabled
            >
                Select a verified email to display </option>
            <option value="m@example.com">m@example.com</option>
            <option value="m@google.com">m@google.com</option>
            <option value="m@support.com">m@support.com</option>
        </x-select>
        <x-form.description>
            You can manage verified email addresses in your
            <x-link href="/examples/forms">email settings</x-link>.
        </x-form.description>
        <x-form.message />
    </x-form.item>
    <x-button type="submit">Update profile</x-button>
</x-form>