Language Selector

The Language Selector should be used in applications that can be translated into more than one language. This selector should always be accessible from the Masthead User section, but it may also be accessible from other areas within an application if desired. The list format and selection mechanism should remain consistent for all instances of the language selector.

Language Selector

Language Selector

Selector Properties

Language Selector

  1. Naming: All available languages should be listed in the native language. For example, “German” should never exist in the list. Instead, “Deutsch” would appear in this case.
  2. User Default (optional): If the Language Selector is being accessed from a login screen, you should include a “User Default” option. This would inherit the language selected by the user on their last session. If available, this option should be the default selection and the first in the list.
  3. Browser Default: There should always be a “Browser Default” option at the top of the list. If “User Default” is also available, the Browser Default option will be second in the list. When selected, the application should inherit the current browser language being used.
  4. Ordering: Language names should be listed in alphabetic order following any default options. The list should scroll as needed.
  5. Selecting: The option or language currently selected should be highlighted for some visual indication. Hovering over another option should also be visually indicated.

Selector Locations

  • From the Masthead User section, the selector should be labeled “Change Language.” Hovering over this label should open a list of all available languages.

Language Selector in Masthead

  • On the Login Page, the language selector is located in the top right of the login card.

Language Selector on Login Page

  • The visual treatment of the Language Selector displayed on the Login Page should be consistent with the selector displayed under the Masthead dropdown.

Language Selector Combobox

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.