Custom templates for select menus

[rpungello]

It would be nice to be able to have custom templates for select menus that allow you to display more than just a single value, while still showing a primary value in the box after selecting an option.

For example, when building a customer search, it would be nice to show (in the list of results)

1. Customer name
2. Address
3. Phone #

While this can be done with the current select combobox, it results in all these fields being combined into the search when submitted, which looks ugly and causes issues if the user wants to refine their search/select another similar option.

Since the UI itself appears to work for searching, it seems the easiest thing would be to have an attribute that tells Flux which value to fill into the <flux:select.input> model, rather than just taking the entire contents of the <flux:select.option>.

[joshhanley]

@rpungello thanks for the request! This is already possible by putting a label attribute on your select.option. We recently fixed a bug with it, which you can find in PR #1643 which will also demonstrate how you can use it, so be sure you are on the latest version of Flux.

[rpungello]

Ah, perfect! I suspected it may have already been an option, I just couldn't find it in the docs.
I saw how to label the input itself, but not individual options.

Thank you!

[joshhanley]

No worries!

[Uhasith]

Would it be possible to extend this same support to variant="listbox" as well?

Right now, it looks like custom attributes or overrides (like label or other props) on select.option don’t get applied when using variant="listbox". Having consistent behavior between the default select and listbox variants would make it easier to maintain accessible and flexible dropdowns. @joshhanley

[joshhanley]

@Uhasith yep, can you please open an issue so we can investigate it? Thanks!