# Language switcher

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/language-switcher

`LanguageSwitcher` renders language options and reports the selected value. It is a
controlled component: your localization layer remains responsible for loading
translations, changing the active locale, and persisting the preference.

```tsx
import { LanguageSwitcher } from "@ovok/native/language-switcher";

function LanguageSettings({ language, changeLanguage }) {
  return (
    <LanguageSwitcher
      selectedLanguage={language}
      onLanguageChange={changeLanguage}
    >
      <LanguageSwitcher.Option value="en_US">
        <LanguageSwitcher.Option.RadioButton />
        <LanguageSwitcher.Option.Label>English</LanguageSwitcher.Option.Label>
      </LanguageSwitcher.Option>
      <LanguageSwitcher.Option value="de_DE">
        <LanguageSwitcher.Option.RadioButton />
        <LanguageSwitcher.Option.Label>Deutsch</LanguageSwitcher.Option.Label>
      </LanguageSwitcher.Option>
    </LanguageSwitcher>
  );
}
```

Use the same locale identifiers your translation system expects. Update the
controlled `language` value after the localization change succeeds, and present
loading or failure feedback in the surrounding screen. The SDK does not provide a
language catalog or translation files.

## References [#references]

- [LanguageSwitcher](/native-sdk/guide/components/language-switcher/language-switcher/)
- [Option, flag, label, and radio button](/native-sdk/guide/components/language-switcher/)
- [Switcher hook and context](/native-sdk/guide/components/language-switcher/advanced-api/)

## API reference [#api-reference]

Every export of `@ovok/native/language-switcher`, with signatures, props and types, is in the [`language-switcher` API reference](/native-sdk/reference/language-switcher).