Skip to content 
🇬🇧 English🇪🇸 Spanish🇫🇷 French Press Alt + L to go back to the navigator language
Language selector - Web Component
The LanguageSelector component can be used imported from:
Playground
Parameters
...
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
change | string | Returns the new value of the "model" attribute |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|
Parameters use
...
locales
If no locales are provided, the component will use the ones available in the ZDS_LOCALES global var. The component will show the language name with the provided translation based on the value:
We can also specify the locales to use:
We can add flags (check the emoji flags modifications) or modify the names of the language selector using slots (with the language code as the slot name):
Special uses
Back to navigator language
If you press Alt + L, the component will change the language back to the navigator language. This is a default behavior that doesn't require special configuration.
We might want to provide the user this information with a toast if the language is to a different one than the navigator:
Browser support
Detected engine:
Chromium
Webkit
Gecko