Language Selector

import {
    LanguageSelector,
    LanguageSelectorContent,
    LanguageSelectorItems,
    LanguageSelectorTrigger,
} from '@kit/i18n/www/ui/language-selector';

export function LanguageSelectorDemo() {
    return (
        <LanguageSelector reload>
            <LanguageSelectorTrigger className="max-w-3xs" />
            <LanguageSelectorContent>
                <LanguageSelectorItems />
            </LanguageSelectorContent>
        </LanguageSelector>
    );
}

What It Does

LanguageSelector and LanguageSelectorBase provide a ready-to-use language picker based on current i18n configuration.

When To Use

• You need a locale switch control in navbar/settings.

Prerequisites

• I18n provider mounted.
• supportedLngs configured in i18n instance.

How To Use

Copy to Clipboardimport { LanguageSelectorBase } from '@kit/i18n/www/ui/language-selector';
 
<LanguageSelectorBase />

For route-based i18n, pass useRouting.

Copy to Clipboard<LanguageSelectorBase useRouting />

MCP Context

Copy to Clipboardcapability: language_selector_ui
entrypoints:
  - @kit/i18n/www/ui/language-selector
inputs:
  - supported_languages
  - optional_routing_mode
outputs:
  - locale_switch_interaction
constraints:
  - must be inside i18n provider context
side_effects:
  - may reload page or change route locale segment

Agent Recipe

1. Place selector in app layout/header/settings page.
2. Use useRouting only when locale is encoded in URL path.
3. Verify language persists across reload.

Troubleshooting

• Runtime context errors indicate missing i18n provider.
• URL not changing with routing mode indicates missing localized route structure.

Related

• Translations

Anatomy

Copy to Clipboardimport {
  LanguageSelector,
  LanguageSelectorBase,
} from "@kit/i18n/www/ui/language-selector";

Copy to Clipboard<LanguageSelector>
  <LanguageSelectorTrigger />
  <LanguageSelectorContent>
    <LanguageSelectorItems />
  </LanguageSelectorContent>
</LanguageSelector>

Base component

If you don't need heavy customization, you can use the LanguageSelectorBase component.

PreviewCode

Copy to Clipboard

import { LanguageSelectorBase } from '@kit/i18n/www/ui/language-selector';

export function LanguageSelectorDemo() {
    return (
        <div className="flex w-full max-w-3xs flex-col items-center gap-8">
            <LanguageSelectorBase />
            <LanguageSelectorBase square />
        </div>
    );
}

Copy to Clipboard<LanguageSelectorBase />

API Reference

Root

LanguageSelectorRootProps

Flag

LanguageSelectorFlagProps

Trigger

LanguageSelectorTriggerProps

Items

LanguageSelectorItemsProps

Base

LanguageSelectorBaseProps