paper-countries | Vaadin

Select Dropdown with list of countries with flags and autocomplete

[ This description is mirrored from at on 2019-05-10 ]

Published on



<paper-countries label="Country name" placeholder="Enter country name..."></paper-countries>


paper-countries is a typeahead component based on Polymer; it allows users to select a country from a list. Think of it as a fun and interactive version of the select input field. We at Blue Water Tracks developed it because we were bored with the usual dropdowns selects fields and wanted to something that was fun using Polymer.

Credit goes out to the creators of flag-icon-css without which we never would have had those beautiful flags.



The element can be installed using bower

bower install paper-countries

If you want to save it in bower.json file, remember to add flag --save

bower install --save paper-countries


  • Following code is required to place in the polymer web component.
<paper-countries country="[[country]]" auto-validate="true"></paper-countries>


Documentation and Demo

To run the demo locally, install using the installation command above and then go into the components folder and run polymer serve


@bhargavkonkathi Programming is like playing chess; each line is as important as each step to determine what kind of player or programmer you are. When ever not playing chess, it's Javascript, Java and mongodb.
@maisnamraju Javascript Ninja; saving the world with one line of javascript at a time. ;)
@dhrytsenko What is my opinion about JavaScript, NodeJS, MongoDB and Polymer? Building blocks to the future! Allowing me to help make the world a better place.

Pull Requests are welcome

If you feel that you have something that could improve the component, please feel free to send a PR or create an issue with an explanation.


This project is licensed under the terms of the MIT license.


Link to this version
ImportedReleased 30 May 2018MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (2.0.4)
Browser Independent
Install with
bower install --save bluewatertracks/paper-countries"#2.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.1.0


  • flag-icon-css#^2.7.0
  • polymer#1 - 2
  • paper-input#^2.0.0
  • paper-listbox#^2.0.0
  • paper-item#^2.0.0
  • iron-ajax#^2.0.0
  • paper-material#^2.0.0
  • iron-component-page#^2.0.0
  • webcomponentsjs#^1.0.10
  • iron-form-element-behavior#PolymerElements/iron-form-element-behavior#^2.0.0