Please document how to add a label to a dropdown component

[rbergman]

Most components in the toolkit seem to accept a text child which is used as its label. The dropdown does not seem to work like that, accepting only option children in a meaningful way. I can see that the gallery screenshot shows off a label above the dropdown demo, but the corresponding gallery app does not demonstrate how this was done. Is there an official way to add a label that is consistent with the approach taken for the other components? It's relatively easy to work around by adding a label element above the dropdown component, but I have the feeling I am missing something and would prefer to take advantage of any benefits conferred from doing it the right way.

[hawkticehurst]

Yeah, this discrepancy in usage/component API is something I've always noticed and wanted to circle back to.

The discrepancy is an implementation detail from the FAST Foundation dropdown component (versus other input foundation components), so it would have to be addressed upstream––@chrisdholt do you have any insights on why dropdowns don't take text content and generate a label from it while other foundation components do?

In the meantime, adding a regular label element above the dropdown component is the "official" way of adding a label (or at least that's how I've implemented it 😅).

[hawkticehurst]

Also for the sake of documenting it here, we also have an open issue on our backlog to explore creating a vscode-label component which could also become a sort of "official" way to handle the labeling of input elements.

[rbergman]

That's a fair explanation, thank you. The label component would be a fine official workaround, and the ad hoc workaround of adding our own top label until then is working just fine.

[hawkticehurst]

You're welcome! And happy to hear a regular label will work for you in the meantime.

As a note to myself for future reference: I'm leaving this issue open (versus considering it a duplicate of #259) so I can more deeply explore if there's an opportunity to update the dropdown component implementation so that it can turn text content into a label like other input components.