Select

Province

<flux:select label="Province" placeholder="Choose...">
    <flux:select.option>Tehran</flux:select.option>
    <flux:select.option>Isfahan</flux:select.option>
    <flux:select.option>Fars</flux:select.option>
    <flux:select.option>Razavi Khorasan</flux:select.option>
</flux:select>

Groups

Category

<flux:select label="Category" placeholder="Choose...">
    <flux:select.group label="Electronics">
        <flux:select.option>Phones</flux:select.option>
        <flux:select.option>Laptops</flux:select.option>
    </flux:select.group>

    <flux:select.group label="Home">
        <flux:select.option>Appliances</flux:select.option>
        <flux:select.option>Furniture</flux:select.option>
    </flux:select.group>
</flux:select>

Sizes and state

<div class="space-y-4">
    <flux:select size="sm" placeholder="Small">
        <flux:select.option>Tehran</flux:select.option>
    </flux:select>

    <flux:select placeholder="Invalid" invalid>
        <flux:select.option>Tehran</flux:select.option>
    </flux:select>

    <flux:select placeholder="Disabled" disabled>
        <flux:select.option>Tehran</flux:select.option>
    </flux:select>
</div>

Reference

flux:select

Prop	Description
label	Label above the control.
description	Smaller text under the label.
placeholder	Shown while nothing is selected.
size	Options: `sm`, `xs`. Default: base.
variant	Options: `default`.
invalid	Marks the control as invalid.
multiple	Allows selecting more than one option.
wire:model	Binds to a Livewire property.

flux:select.option

Prop	Description
value	Submitted value. Defaults to the label text.

flux:select.group

Prop	Description
label	Group label inside the list.

Groups

Sizes and state

Reference

flux:select

flux:select.option

flux:select.group

Related