Localisation

Language switcher

Four language sets on one surface. Only one is visible at a time, so the copy swaps in place without the page reflowing.

English

Français

Deutsch

日本語
Paper-cut watermelon character holding a UK flag

Built once, read anywhere

Every component in this set carries its own copy. Swap the language and the layout holds, because nothing depends on the length of a single string.

Read more
Do this to your own experience

Paste the following into Flex AI on any page that already has copy.

Add a language switcher to this page. Duplicate every text block into French, German and Japanese, keep each set in its own group, and hide all but English. Add one button per language that shows its set and hides the others, and give the active button a filled state. Use the brand kit tokens for all colour and type, and make the buttons at least 44px tall so they work on touch.

Name the languages you actually need. The switcher holds four comfortably; past six, a dropdown reads better than a row.