Select Option Groups

[mikebronner]

I couldn't find documentation or code that supported select option groups. Did I miss something? I am using the following work-around:

                    <flux:select
                        class="!font-sans !w-auto !border-transparent"
                        data-tippy-content="Select A Book"
                        data-tippy-placement="top"
                        wire:model="selectedBook"
                    >

                        @foreach ($bookOptions as $label => $options)
                            <optgroup
                                label="{{ $label }}"
                            >
                                
                                @foreach ($options as $option)
                                    <flux:option
                                        wire:key="{{ $option }}"
                                        value="{{ $option }}"
                                    >
                                        {{ $option }}
                                    </flux:option>
                                @endforeach

                            </optgroup>
                        @endforeach

                    </flux:select>

If this is the expected implementation, is this something that would be useful to document? Or is this a feature that could be added?

[iliyto]

I think you can use any HTML tags inside <flux:select>.

Example:

<flux:select
    class="!font-sans !w-auto !border-transparent"
    data-tippy-content="Select A Book"
    data-tippy-placement="top"
    wire:model="selectedBook"
>
    @foreach ($bookOptions as $label => $options)
        <div class=“font-semibold uppercase border-b pb-1” >{{ $label }}</div>
            @foreach ($options as $option)
                <flux:option
                    wire:key="{{ $option }}"
                    value="{{ $option }}"
                >
                    {{ $option }}
                </flux:option>
            @endforeach
        </optgroup>
    @endforeach
</flux:select>