Select - Laravel Blade

Use the select component to allow users to choose one or more options from a dropdown list, with support for sizes, disabled state, underline variant, and multiple selection.

Default Select

Blade code

<div class="max-w-md">
    <x-fwb.select label="Select a country" placeholder="Choose a country" :options="['us' => 'United States', 'ca' => 'Canada', 'fr' => 'France', 'de' => 'Germany']" />
</div>

Multiple Select

Blade code

<div class="max-w-md">
    <x-fwb.select label="Select countries" :multiple="true" :options="['us' => 'United States', 'ca' => 'Canada', 'fr' => 'France', 'de' => 'Germany', 'uk' => 'United Kingdom']" />
</div>

Select Sizes

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.select label="Small select" size="sm" placeholder="Choose an option" :options="['1' => 'Option 1', '2' => 'Option 2', '3' => 'Option 3']" />
    <x-fwb.select label="Default select" size="md" placeholder="Choose an option" :options="['1' => 'Option 1', '2' => 'Option 2', '3' => 'Option 3']" />
    <x-fwb.select label="Large select" size="lg" placeholder="Choose an option" :options="['1' => 'Option 1', '2' => 'Option 2', '3' => 'Option 3']" />
</div>

Disabled State

Blade code

<div class="max-w-md">
    <x-fwb.select label="Disabled select" :disabled="true" placeholder="You cannot change this" :options="['1' => 'Option 1', '2' => 'Option 2']" />
</div>

Underline Select

Blade code

<div class="max-w-md">
    <x-fwb.select label="Underline select" :underline="true" placeholder="Choose a country" :options="['us' => 'United States', 'ca' => 'Canada', 'fr' => 'France', 'de' => 'Germany']" />
</div>

Helper Text

Please select your country of residence.

Blade code

<div class="max-w-md">
    <x-fwb.select label="Select your country" placeholder="Choose a country" :options="['us' => 'United States', 'ca' => 'Canada', 'fr' => 'France']" helper="Please select your country of residence." />
</div>

Select with Option Groups

Blade code

<div class="max-w-md">
    <x-fwb.select label="Choose a category">
        <option value="" disabled selected>Select a category</option>
        <optgroup label="Electronics">
            <option value="phones">Phones</option>
            <option value="laptops">Laptops</option>
        </optgroup>
        <optgroup label="Clothing">
            <option value="shirts">Shirts</option>
            <option value="pants">Pants</option>
        </optgroup>
    </x-fwb.select>
</div>

Component Properties

Select x-fwb.select

Prop Type Default Description
id string auto Unique identifier for the select. Auto-generated if not provided.
label string|null null Label text displayed above the select.
options array [] Associative array of value => text pairs for the options.
placeholder string|null null Placeholder text shown as the first disabled option.
helper string|null null Helper text displayed below the select.
size string md Select size: sm, md, or lg.
disabled bool false Disable the select field.
required bool false Mark the select field as required.
multiple bool false Allow multiple options to be selected.
underline bool false Use underline style instead of bordered box.