Country and Language Selector Stable New in 3.1

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.

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.

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.

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.

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