Language selectors
Language selectors allow users to pick languages from a list. In projects like Wikipedia with 300+ language Wikipedias, or software like MediaWiki with 350+ languages supported, language selection is crucial and can occur in many different contexts.
Using language selectors
Language selectors display a list of languages. The list of languages can be customized and may be different in each component application. In some cases the selection will display all possible languages. In other cases, only the few languages for which a specific piece of content is available may be shown.
The language selectors should be used when users select language as input or for navigation purposes. Language selectors automatically adapt to the number of languages and the screen real state available. In addition, language selectors can be customized with more information and actions.
Depending on the context, the language selectors can include:
- Suggested languages to facilitate finding frequently selected languages by the user.
- Additional details for each language to provide additional metadata in the form of labels or icons.
- Grouping language variants[1] to easily support the selection of closely-related languages.
- Quick actions to access other language-related activities relevant to the context.
- Selection range for cases where more than one language has to be selected at a time.
- Empty states with optional follow-up actions allowing users to expand the available languages.
Designing
The language selectors combine a search input and a menu with the list of languages. In addition, specific elements of the language selectors can be adjusted to address particular needs.
Label
The visual label is optional, due to the specific context language selectors are used in. But a visually hidden label for screen readers is obligatory.
Placeholder text
Placeholder text is obligatory for language selectors. Use Base30 for it.
Suggested languages
The suggested languages section is provided by default to simplify recurrent selection based on frequent and previous choices. They are hidden automatically when the total number of languages is small (less than 10) to avoid unnecessary repetition. Consider hiding the suggested list explicitly when the suggestions may not be useful.
Additional details
Provide a clarifying text or icon next to the language can help to anticipate relevant information such as the title of the page the user will be navigating to. However, given the potentially large number of languages, additional details might increase the information density and make the selection process less fluent.
Grouping language variants
When providing options that are considered variants of the same language such as Swiss German and Austrian German, it is preferred to present related languages grouped under a common family rather than exposing all the individual options.
Additional actions
In addition to picking a language, the selector allows to optionally integrate different kinds of actions that may be relevant:
- Quick actions. Surface secondary general actions related to the whole list of languages. These consist of an icon and a label. When one is provided, the icon will be shown in the language selector directly. When more than one action is provided, a "more" icon will provide access to a separate view will list them.
- Prominent action. One relevant action that is strongly connected to the content can be presented at the top of the list. For example, surfacing missing languages to lead users to create them with follow-up actions (next).
- Follow-up actions on empty states. Provide actions that allow to make the missing language available (by translating, creating, connecting, or any other means).
Selection range
Selecting one language at a time is the default, but cases where more than one language can be selected, the multiple selection version can be more convenient.
See the detailed design specification document for more details.
States of language selectors
Selecting
Interaction with the language selector respects the visual states and interaction of its individual components. For example, hover or focus states, and keyboard manipulation work in the usual way for the search bar and the menu listing the languages.
Searching
Flexible search with typeahead autocompletion is used to filter the language results.
Empty states
The selector shows empty states in different circumstances:
- No languages available.
- Search leads to a language not available for selection.
- Search leads to no known language.
Empty states can be customized to include mechanisms for making more languages available.
Expanded layout
By default language selectors are shown as a modal
element over the current contents and taping outside cancels the selection. The layout adapts responsively:
- On wide screens when the number of languages to select is large (more than 30), the selector becomes wider and uses a 3-column layout.
- On narrow screens the selector expands to the full viewport. In such cases, a header provides the control to close the selector.
The optional section for suggested languages shows up to six languages using a two column layout by default, but using three columns when the list of all languages does so.
Types
Default
By default, the language selector presents list of languages for users to pick one. Making one selection closes the selector automatically. The list of languages adapts dynamically to the number of languages and the space available. Regardless of the layout, it is composed simply by language names.
Other types of language selector provide room for additional information, actions, groupings and selections.
Additional details and actions
A type of language selector allowing for additional details and actions is also available:
- Description labels and/or icons. Language items in the list optionally include an icon and a secondary label to communicate further details.
- Additional actions. Although the main purpose of the selector is still to pick languages, additional actions can be defined. These actions can appear more prominently (on top) or as part of the quick action menu in a corner at the bottom.
Grouping language variants
Support for language variants includes the possibility to expand/collapse groups of related languages. In addition, when a variant is selected a prominent section with other variants allow users to quickly switch between related variants.
Multiple selection
By default the selector is optimized to support selecting one language at a time. Specific types of selector are available to support a different number of languages. In particular, the following cases are supported:
- Multiple selection. Supports selecting a whole list of languages in one go.
- Language pair. Supports selecting two languages. This can be useful when selecting a language pair from a single entry point control.
- All languages. Provides an additional option to select all languages. This can be convenient as a reset option when filtering.