LanguageSelect

When to use

Host or module header language toggle when TranslationProvider is mounted.

When NOT to use

Without TranslationProvider — translations will not load. Country/store selection — use StoreCountrySelector.

Podium primitives composed

• Podium Select

Required providers

• TranslationProvider

Props

Auto-generated from src/components/LanguageSelect/LanguageSelect.tsx. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

LanguageSelectProps

Props for . Intentionally presentational-only — there are no data props. The component is wired to the surrounding <TranslationProvider> and self-updates when setLocale is called from anywhere else in the tree.

Prop	Type	Required	Description
ariaLabel	string	No	Accessible label for the underlying input. Falls back to label if present, then to the string "Language".
className	string	No	className applied to the wrapping <div>.
compact	boolean	No	Use the compact (small) input size.
dataTestId	string	No	Optional data-testid applied to the wrapping <div>.
label	string	No	Label rendered above the input.
onLanguageChange	(translationUrlCode: string) => void	No	Fired with the selected language’s translationUrlCode after the provider’s setLocale has been invoked. Use for host-side side effects such as telemetry. The locale change itself is handled internally — consumers do not need to wire setLocale themselves.
onOpenChange	(open: boolean) => void	No	Fired with true when the dropdown opens, false when it closes.
placeholder	string	No	Placeholder shown when nothing is selected.
style	CSSProperties	No	Inline style applied to the wrapping <div>.
sx	SxProps<Theme>	No	MUI sx prop forwarded to the underlying AutoComplete.

Examples

Header language picker

import { LanguageSelect, TranslationProvider } from '@nike/whisker-component-library';

<TranslationProvider locale="en-US">
  <LanguageSelect data-testid="header-language" />
</TranslationProvider>;