Edit Language Switcher

Name

Also known as (comma separated)

Brief definition Control for changing the interface language.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "language", "type": "select", "label": "Interface language", "default": "en", "options": [ "en", "es", "ar" ] }, { "id": "showFlag", "type": "toggle", "label": "Show language code chip", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "userName", "type": "text", "label": "User name", "default": "Sam" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lsw lsw--{{language}}\" lang=\"{{language}}\" dir=\"auto\">\n {{#if showFlag}}<span class=\"lsw__chip\" style=\"background:{{accent}};\">{{language}}</span>{{/if}}\n <p class=\"lsw__greet lsw__greet--en\">Welcome back, {{userName}}</p>\n <p class=\"lsw__greet lsw__greet--es\">Bienvenido de nuevo, {{userName}}</p>\n <p class=\"lsw__greet lsw__greet--ar\">&#1571;&#1607;&#1604;&#1611;&#1575; &#1576;&#1603; &#1605;&#1580;&#1583;&#1583;&#1611;&#1575;&#1548; {{userName}}</p>\n</div>\n<style>\n.lsw { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.lsw__chip { display: inline-block; font: 700 10px ui-monospace, monospace; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }\n.lsw__greet { display: none; margin: 0; font-weight: 600; }\n.lsw--en .lsw__greet--en, .lsw--es .lsw__greet--es, .lsw--ar .lsw__greet--ar { display: block; }\n</style>", "tailwind": "<div class=\"lswtw lswtw--{{language}} font-sans text-[15px] leading-7 text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" lang=\"{{language}}\" dir=\"auto\">\n {{#if showFlag}}<span class=\"inline-block font-bold text-[10px] font-mono uppercase py-1 px-2.5 rounded-full mb-3\" style=\"background:{{accent}};\">{{language}}</span>{{/if}}\n <p class=\"lswtw__greet lswtw__greet--en hidden m-0 font-semibold\">Welcome back, {{userName}}</p>\n <p class=\"lswtw__greet lswtw__greet--es hidden m-0 font-semibold\">Bienvenido de nuevo, {{userName}}</p>\n <p class=\"lswtw__greet lswtw__greet--ar hidden m-0 font-semibold\">&#1571;&#1607;&#1604;&#1611;&#1575; &#1576;&#1603; &#1605;&#1580;&#1583;&#1583;&#1611;&#1575;&#1548; {{userName}}</p>\n</div>\n<style>\n.lswtw--en .lswtw__greet--en, .lswtw--es .lswtw__greet--es, .lswtw--ar .lswtw__greet--ar { display: block; }\n</style>", "react": "export function LanguageSwitcher({\n language = \"{{language}}\",\n showFlag = {{showFlag}},\n accent = \"{{accent}}\",\n userName = \"{{userName}}\",\n}) {\n const greetings = {\n en: `Welcome back, ${userName}`,\n es: `Bienvenido de nuevo, ${userName}`,\n ar: `\\u0623\\u0647\\u0644\\u0627\\u064B \\u0628\\u0643 \\u0645\\u062C\\u062F\\u062F\\u0627\\u064B\\u060C ${userName}`,\n };\n return (\n <div lang={language} dir=\"auto\" style={{ font: \"15px/1.6 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n {showFlag && <span style={{ display: \"inline-block\", fontWeight: 700, fontSize: 10, textTransform: \"uppercase\", padding: \"3px 9px\", borderRadius: 999, marginBottom: 12, background: accent }}>{language}</span>}\n <p style={{ margin: 0, fontWeight: 600 }}>{greetings[language]}</p>\n </div>\n );\n}" }