Add select group

[ganyicz]

The scenario

AI agents often reach for a non-existent <flux:select.option.group> component when trying to organize a select list.

For example, a list of timezones organized into geographic regions.

The problem

Flux does not provide a component for organizing options into groups like it does with <flux:menu.group>.

The solution

<flux:select wire:model="timezone" placeholder="Choose a timezone...">
    <flux:select.group label="North America">
        <flux:select.option value="America/New_York">Eastern Time</flux:select.option>
        <flux:select.option value="America/Chicago">Central Time</flux:select.option>
        <flux:select.option value="America/Denver">Mountain Time</flux:select.option>
        <flux:select.option value="America/Los_Angeles">Pacific Time</flux:select.option>
    </flux:select.option.group>

    <flux:select.group label="Europe">
        <flux:select.option value="Europe/London">London</flux:select.option>
        <flux:select.option value="Europe/Paris">Paris</flux:select.option>
        <flux:select.option value="Europe/Berlin">Berlin</flux:select.option>
    </flux:select.option.group>
</flux:select>

Screen.Recording.2026-07-17.at.15.07.59.mov

Comparison with menu

The design mostly mirrors <flux:menu.group>, however it intentionally differs in three ways:

1. It does not expose subcomponents like <flux:menu.heading> or <flux:menu.separator>.
   Unlike menu, users won't be able to compose these components themselves.
2. The heading has a left offset so it aligns with the option labels.
   Select options are never displayed without indicators unlike menu, where that is the default.
3. It uses label instead of heading following the <optgroup> spec

Docs: https://github.com/livewire/flux-docs/pull/180
Flux Pro: https://github.com/livewire/flux-pro/pull/523