Country flag for phone code dropdown / searcable listbox

[ghabriel25]

In my application, I use country flag as leading icon on dropdown item like this

I think this is also related to country code in phone list #568

Maybe something like https://fluxui.dev/components/select#options-with-images/icons

<flux:select variant="listbox" searchable placeholder="Select country...">
    <flux:select.option>
        <div class="flex items-center gap-2">
            <flux:flag.american-samoa variant="mini" /> American Samoa
        </div>
    </flux:select.option>
    <flux:select.option>
        <div class="flex items-center gap-2">
            <flux:flag.andorra variant="mini" /> Andorra
        </div>
    </flux:select.option>
    <flux:select.option>
        <div class="flex items-center gap-2">
            <flux:flag.angola variant="mini" /> Angola
        </div>
    </flux:select.option>
</flux:select>

[jdc1898]

is this a duplicate of #568?

[ghabriel25]

@jdc1898 That asking about country code but this is country flag as icon

[jdc1898]

Doh! Senior moment!

[jdc1898]

How about this?

country-selector-demo.webm

[ghabriel25]

Awesome. Can it used separately like in field section.

[jdc1898]

I think the JS would need to be included into the core package but it should be trivial if one of the maintainers wants to review it.

Basic

<flux:country wire:model="country" />

Set default country

<flux:country wire:model="country" country="gb" />

Preferred countries (pinned to top with divider)

<flux:country wire:model="country" preferred="us,gb,ca" />

Limit to specific countries

<flux:country wire:model="country" countries="us,gb,ca,de,fr" />

With label and description

<flux:country wire:model="country" label="Country" description="Where are you located?" />

Size and variant

<flux:country wire:model="country" size="sm" />
<flux:country wire:model="country" variant="filled" />

Props

Prop	Type	Default	Description
country	string	"us"	Default selected country (ISO2 code)
preferred	string	null	Comma-separated ISO2 codes pinned to top of list
countries	string	null	Comma-separated ISO2 whitelist (limits the list)
placeholder	string	null	Placeholder text when no country selected
variant	string	"outline"	"outline" or "filled"
size	string	null	null (default), "sm", or "xs"
invalid	bool	null	Force invalid state
name	string	null	Form field name (auto-detected from wire:model)