Blog

Dropdown components with ready-to-use data

By  
Binh Bui
Binh Bui
·
On Aug 29, 2018 7:00:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

The dropdown menu is a wonderful UI element. It allows us to compact a massive number of choices in a single box. There are plenty of good drop-down UI web components out there, and those I will cover in another blog post. In this article, let’s have a look at those drop-downs that already have data in them.

Usa-state-list by biztek

A select component for all the USA states, usa-state-list uses the USPS state abbreviation for the return attribute value, which means it’s suitable for any form that needs a legal address (example: a birth registration form, passport form, social security form). You can easily set the label, title, and placeholder. For data binding/fetching, the attribute value will return the choice the user makes.

DemoComponent

Country-select by Protoss78

A simple country selector that supports localized country names for an impressive number of 253 languages. To set the language, apply the locale code (BCP 47) to the attribute language. As an option, you can pre-select a country with the attribute selected-country, but note its value must align with ISO 3166 alpha-2. Country-select is extremely handy, if your website must support the multilanguage feature. For a full list of localized names, head to umpirsky/country-list.

DemoComponent

Paper-countries by bluewatertracks

This component is an ideal element for any shipping or tracking website. Paper-countries strikes with its excellent features, like typeahead, sub-string matching, and of course, showing the country flag. You may set the limit of suggestions shown on display, as well as get both the country code and name from the property object country. Paper-countries will guarantee a fun time for your users whenever they use it.

DemoComponent

Paper-autocomplete by ellipticaljs

The best thing about paper-autocomplete is that you can input your own set of autocomplete suggestions, either by applying the HTML attribute source, or setting it in the script. The source format is {“text”: “”, “value”: “”}. Additionally, the source can be remote as well, if so, use remote-source. If you want to implement autocomplete suggestions with your input component, you may try the sub-component paper-autocomplete-suggestion and apply data binding.

DemoComponent

Bonus: pokemon-selector by samiheikki

A special delivery for all the Pokemon lovers out there, this is a combo box selector for Pokemon, which you can either select from the dropdown list, or search for any substring. Pokemon-selector provides a nice picture of the Pokemon with its according number based on the National Pokedex number. It is possible to search based on the Pokemon's original region with the attribute region, check here for a list of values.

DemoComponent

Compatibility table

The table below will shortly summarize the component’s info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.

Component

Library

Mobile

Browsers

usa-state-list

Polymer^1.7.0

C,S,O,F,E,I

country-select

Polymer^2.0.0

C,S,O,F,E,I

paper-countries

Polymer 1 - 2

C,S,O,F,E,I

paper-autocomplete

Polymer#1.9 - 2

C,S,O,F,E,I

pokemon-selector

Polymer^1.4.0

C,S,O,F

Final words

With lots of drop-down components out there, you can quickly and easily make your own version of selectors with your desired content. These components are proof of how customized and compact a component can be.

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui