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
← Back to Internationalization