UI MarCom

Country and Language Selector New

The Country and Language Selector makes selecting either the prefered language or country and region for an application possible.

General guidance

The Country and Language Selector provides a unified yet flexible option for selecting country and language in multi-language applications. It is part of the Application Bar sitting inside the Meta Menu as a dropdown behind the globe icon.

Application Bar Language Selection on desktop
Language Selection in the Application Bar on desktop
Application Bar Country and Language Selection on desktop
Country and Language Selection in the Application Bar on desktop
simple language selection mobile example
Language Selection in the Application Bar on mobile
complex language selection mobile example
Country and Language Selection in the Application Bar on mobile

Types and purpose

Depending on the purpose there are different types that differ in complexity or functionality. Making it possible to choose either a language selection version or combination of country and language selection combined.

Language Selection

The Language Selection presents a list of options from which a user can select one. If the number of languages exceeds 7 languages an additional inputfield acts as a filter to reduce the amount of options to choose from.

Language Selection usage sample on desktop
Language Selection in the Application Bar example
simple language selection structure
Simple language selection
complex language selection structure
Complex language selection
Structure
  1. Filter An inputfield acts as a filter and is available, if the amount of options is high.
  2. Menu A list of multiple options to select from within a menu.

Country and Language Selection

The Country Language Selection is a combined filter of selecting the country or region and choosing the language for the application. There are two options. An independent and interdependent version.

Independent

In the independent version country and language can be selected separately.

Language Selection in the Application Bar on desktop
Independent Country and Language Selection in the Application Bar example
Independent language and country selection mobile structure
Independent language and country selection
Structure
  1. Headline Description field.
  2. Close Icon Closes the dropdown menu.
  3. Filter An inputfield acts as a filter and is available, if the amount of options is high.
  4. Dropdown Corresponding dropdown arrow inside the select-field
  5. Button Select Button

Interdependent

In the interdependent version choosing a country defines the available languages options to choose from. A radio button list is listing the interdependend languages that can be selected.

Independent language and country selection usage sample on desktop
Interdependent Country and Language Selection in the Application Bar example
Interdependent language and country selection mobile structure
Interdependent language and country selection

Structure

  1. Headline Description field.
  2. Close Icon Closes the dropdown menu.
  3. Filter An inputfield acts as a filter and is available, if the amount of options is high.
  4. Dropdown Corresponding dropdown arrow inside the select-field
  5. Radio Button Group Radio button list
  6. Button Select Button