Title: How to Add Language flags in Vaadin 10 Combo box
Tags: vaadin
Question: How to Add Language flags in Vaadin 10 Como box
Comment: Check out this example
https://vaadin.com/components/vaadin-combo-box/java-examples/using-templates
or this
https://vaadin.com/components/vaadin-combo-box/java-examples/using-components

Comment: I want to create a language switcher and for that I want to add a language flag before the language text like I showed in Image I attached .

Comment: Can you add a bit of context? We can't really help you if we don't know what you tried.


Here is another answer: You can use comboBox.setRenderer() to build your own layout that will be used.
comboBox.setRenderer(new ComponentRenderer<HorizontalLayout, MyLanguageClass&gt;(language -&gt; {
HorizontalLayout layout = new HorizontalLayout();
layout.add(new Image(language.getPathToFlag(), language.getName()));
layout.add(new Label(language.getName()));
return layout;
This example will do a basic HorizontalLayout with an Image and a Label. You can of course adjust this further to your needs.
I used a ComponentRenderer here, but you can also use a TemplateRenderer
Please note that you still have to use comboBox.setItemLabelGenerator() in addition to comboBox.setRenderer(), because the renderer is not used for the selected item - only for the item list. As far as I know, there is no way yet to use a renderer for the selected item.
Edit for Vaadin 13 / Vaadin 14:
With Vaadin 13+, you can use the Component Select to achieve exactly what you want - the selected option also shows a flag!
private ComponentRenderer<HorizontalLayout, Locale&gt; languageRenderer = new ComponentRenderer<&gt;(item -&gt; {
HorizontalLayout hLayout = new HorizontalLayout();
Image languageFlag = new Image(&quot;img/languageflags/&quot;+item.getLanguage()+&quot;.png&quot;, &quot;flag for &quot;+item.getLanguage());
languageFlag.setHeight(&quot;30px&quot;);
hLayout.add(languageFlag);
hLayout.add(new Span(getTranslation(&quot;LanguageSelection.&quot;+item.getLanguage())));
hLayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);
return hLayout;
private Select<Locale&gt; langSelect;
private Select<Locale&gt; buildLanguageSelection() {
langSelect = new Select<&gt;();
langSelect.setEmptySelectionAllowed(false);
langSelect.setRenderer(this.languageRenderer);
langSelect.setItems(new Locale(&quot;de&quot;), new Locale(&quot;fr&quot;), new Locale(&quot;en&quot;));
langSelect.setValue(UI.getCurrent().getLocale());
langSelect.addValueChangeListener(change -&gt; UI.getCurrent().getSession().setLocale(change.getValue()));
return langSelect;
@Override
public void localeChange(LocaleChangeEvent event) {
// because the renderer uses `getTranslation()`, this will re-translate the shown values using the new Locale.
// if langSelect.refreshItems() ever becomes public, use that instead
langSelect.setRenderer(languageRenderer);
Edit 2: I published the Class LanguageSelect as an add-on in the vaadin repository which bases on this code but is much simpler to use. Available for Vaadin 14 only.
LanguageSelect langSelect = new LanguageSelect(
new Locale(&quot;de&quot;),
new Locale(&quot;fr&quot;),
new Locale(&quot;en&quot;)
someLayout.add(langSelect);

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:12/13/18', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<vaadin>', 'Title': 'How to Add Language flags in Vaadin 10 Combo box', 'ViewCount': 1054, 'id': 53763178, 'user_AboutMe': None, 'user_AccountId': 14939055.0, 'user_DisplayName': 'Shekhar Dixit', 'user_Reputation': 31.0, 'user_Views': 5.0, 'user_id': 10786309.0}}