Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/language-selector.

When to use it

Use LanguageSelector when the storefront supports multiple languages and visitors need a way to switch. It is typically placed in the header utility area or footer alongside other locale controls like CountryRedirect.

Composition notes

LanguageSelector is a controlled select component:

• languages is an array of language options with code, label, and optional icon.
• value and onValueChange manage the selected language.
• variant controls the trigger display: "full" (language name), "code" (two-letter code with globe icon), or "icon" (language icon only).

Behavior and theming guidance

The selector renders as a styled Select dropdown that fits into compact utility bars. The "code" variant is the most space-efficient for tight header layouts. The "full" variant works better in footer or settings contexts where space is not constrained.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=LanguageSelector.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes