User interface patterns for language selection and switching with various interaction models.

App Dashboard

Welcome to our platform

Explore features and manage your account

Language:
Current Language: English (English)

Dropdown Selector

Header Navigation
βœ… Good for desktop navigation bars

Modal Selector

Full Language List
βœ… Good for mobile and extensive language lists

Inline Selector

Language:
βœ… Good for limited options in forms/settings

Flag Grid

βœ… Good for visual language selection

Dropdown

Compact selector for header navigation with popular languages first.

Modal

Full-screen selection with search for extensive language lists.

Inline

Direct selection buttons for limited options in settings.

Flag Grid

Visual grid layout using flags for quick recognition.

βœ… Do

  • β€’ Show native language names
  • β€’ Use consistent flag icons
  • β€’ Provide search for long lists
  • β€’ Remember user preference

❌ Don't

  • β€’ Use only English names
  • β€’ Hide current selection
  • β€’ Require page reload
  • β€’ Mix country/language flags

πŸ’‘ Tips

  • β€’ Auto-detect browser language
  • β€’ Show popular languages first
  • β€’ Include search functionality
  • β€’ Persist across sessions

STORAGE

localStorage.setItem(
Β Β 'language', 'es'
);

AUTO-DETECT

navigator.language
// 'en-US'

URL PARAM

/app?lang=es
/es/dashboard