Language Picker

A custom selector allowing users to choose their preferred language on a page.

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

The Language Picker can be used to change the default language of a website.

The component HTML is a <form> element composed of a <label> and a <select> to choose among different language options.

On devices where JavaScript is enabled, the default <select> is replaced with a <button> element and a custom dropdown list of languages.

The text of the <label> element is used as aria-label for the custom <button> element, while the data-trigger-class attribute of the .language-picker element can be used to pass a list of custom classes to be added to the custom <button> element (for example, data-trigger-class="btn btn--subtle").

If you want to change the arrow icon inside the <button> element, you can update the svgPath propery of the LanguagePicker object defined in the language-picker.js file:

var LanguagePicker = function(element) {
  this.element = element; = this.element.getElementsByTagName('select')[0];
  // ...
  this.svgPath = '<svg viewBox="0 0 12 12"><path d="M11.5,2H.5a.5.5,0,0,0-.412.783l5.5,8a.5.5,0,0,0,.824,0l5.5-8A.5.5,0,0,0,11.5,2Z" fill="currentColor"/></svg>';
  // ...

Custom Dropdown Behaviour

The custom dropdown contains a list of links to the website in different languages.

To set the correct link, make sure to modify the getLanguageUrl() function in the language-picker.js file:

function getLanguageUrl(option) {
  // ⚠️ Important: You should replace this return value with the real link to your website in the selected language
  // option.value gives you the value of the language that you can use to create your real url (e.g, 'english' or 'italiano')
  return '#';

Make sure to modify the initLanguageSelection() function as well, removing the js code inside the else statement (that is a demo code only):

function initLanguageSelection(picker) {
  picker.element.getElementsByClassName('language-picker__list')[0].addEventListener('click', function(event){
    var language ='.language-picker__item');
    if(!language) return;

    if(language.hasAttribute('aria-selected') && language.getAttribute('aria-selected') == 'true') {
      // selecting the same language
      picker.trigger.setAttribute('aria-expanded', 'false'); // hide dropdown
    } else { 
      // ⚠️ Important: this 'else' code needs to be removed in production. 
      // The user has to be redirected to the new url -> nothing to do here

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!