How to implement a dropdown with country flags

[amyzheng95]

Was looking at using Paste Select but was wondering if I'll have to import all the flag icons to make it work?

[serifluous]

Thanks, @amyzheng95 ! We've been discussing with our team how to do this with Paste components. Right now neither Select nor Combobox can take images, so we're discussing some solutions.

Do you have a page screenshot/example of where you're planning on using this?

[serifluous]

@amyzheng95 Since the Select and Combobox components can't take images right now, based on the design mockup you shared with us on Slack, you can:

1. Replace the flag with the country name and country code (e.g., "Estonia (+372)")
2. Remove the country code prefix on the form input next to it.

I definitely recommend chatting with the product designer on your team, though, to check if there are any other possible solutions.

[vankhoawin]

Revisiting this: now that Combobox can take a optionTemplate prop to render custom JSX, is there any interest in adding country icons in order for us to create a Country Dropdown using Paste?

https://paste.twilio.design/components/combobox#component-props

[richbachman]

Hi @vnguyen94. We've discussed ideas about how to accomplish this with the best developer experience in mind, i.e. what's the best way to import all the country icons. But nothing is set in motion yet.

We're open to hearing your thoughts, so let us know if you have any solutions.

[vankhoawin]

hmm interesting lol. what if Paste exported all of the country icon SVGs as usual. A CountryDropdown component (which doesn't necessarily have to live in Paste) could take those SVGs and combine them into a spritesheet/icon font?

A CountryDropdown doesn't necessarily need all the pros of SVGs and might be better suited with a sprite sheet:

• CountryDropdown icons will be in a fixed dimension
• CountryDropdown icons don't need any manipulations e.g. background color change
• spritesheet should be smaller in size in comparison to inline SVGs, can be cached, and don't need to be parsed

cons:

• SVGs are supposedly more a11y-friendly? i haven't tried personally

i'm just spitting ideas if it wasn't readily apparent 😄 but support for a CountryDropdown would really help out a lot of Twilio teams

[vankhoawin]

just to tie this up, our team's CountryDropdown component is now using Unicode for country flags, which is well-supported by browsers and doesn't have a bundle size impact as any of the above options do.

[ghelton]

We currently have a design that allows users to select a status for their device. This design displays a supporting icon that we display alongside the label. We would also like this to be displayed when selected.

Ideal display:

What we have currently:

Ideally we'd add a Selected Item Template or something along those lines, currently only a string is supported.
This came up once before and we worked around it by not displaying the icon. Any chance we can reconsider this functionality? Is there room for us to add support ourselves in the future if we'd like?

[ghelton]

Ok can you elaborate on the reasoning here? It seems sensible that the content you select match the content displayed.

Is this something our team can contribute if there's no reasoning against it? I'm trying to avoid maintaining a custom combo box if possible.

[gloriliale]

Hi @ghelton, I'm getting a better idea of the feasibility of this from the team, let me get back to you!

[gloriliale]

Hi @ghelton! Got the green light from design; we can move forward with this as a contribution! Do you have a time frame you were thinking about doing this work in? It'd be great to get this in front of committee as well; we can do that either before a PR or after, depending on your timeline. This is a new type of contribution so I'm excited to see how we can make it happen!

[ghelton]

Great! I think I might try and spend some time on this during Tweek 🤞🏻

[gloriliale]

Hi again @ghelton!
I got some clarification on this in particular, and it looks like it's not possible foundationally 😞 . We use native HTML input elements such as <select /> and <input /> to build our components, including Combobox,, and these HTML elements don't allow for images, icons, or svgs to be added to the value of the control. The best way we've found to get this kind of functionality would be what Van posted above: his team's solution is using unicode emojis. Thanks for bearing through so much back and forth on this.