Edit Region Selector

Name

Also known as (comma separated)

Brief definition Control for choosing a country/region.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "region", "type": "select", "label": "Region", "default": "us", "options": [ "us", "uk", "jp" ] }, { "id": "showDialCode", "type": "toggle", "label": "Show dial code", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "phoneLocal", "type": "text", "label": "Local number", "default": "555 123 4567" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"regs regs--{{region}}\">\n <div class=\"regs__control\">\n <span class=\"regs__chip regs__chip--us\" style=\"background:{{accent}};\">US</span>\n <span class=\"regs__chip regs__chip--uk\" style=\"background:{{accent}};\">UK</span>\n <span class=\"regs__chip regs__chip--jp\" style=\"background:{{accent}};\">JP</span>\n <span class=\"regs__name regs__name--us\">United States</span>\n <span class=\"regs__name regs__name--uk\">United Kingdom</span>\n <span class=\"regs__name regs__name--jp\">Japan</span>\n </div>\n <p class=\"regs__phone\">{{#if showDialCode}}<span class=\"regs__dial regs__dial--us\">+1</span><span class=\"regs__dial regs__dial--uk\">+44</span><span class=\"regs__dial regs__dial--jp\">+81</span> {{/if}}{{phoneLocal}}</p>\n</div>\n<style>\n.regs { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.regs__control { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }\n.regs__chip { display: none; font: 700 11px ui-monospace, monospace; padding: 4px 9px; border-radius: 6px; }\n.regs__name { display: none; font-weight: 600; }\n.regs--us .regs__chip--us, .regs--uk .regs__chip--uk, .regs--jp .regs__chip--jp { display: inline-block; }\n.regs--us .regs__name--us, .regs--uk .regs__name--uk, .regs--jp .regs__name--jp { display: inline; }\n.regs__phone { margin: 0; font-size: 16px; font-weight: 700; }\n.regs__dial { display: none; color: #24143099; }\n.regs--us .regs__dial--us, .regs--uk .regs__dial--uk, .regs--jp .regs__dial--jp { display: inline; }\n</style>", "tailwind": "<div class=\"regstw regstw--{{region}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\">\n <div class=\"flex items-center gap-2 mb-3\">\n <span class=\"regstw__chip regstw__chip--us hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md\" style=\"background:{{accent}};\">US</span>\n <span class=\"regstw__chip regstw__chip--uk hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md\" style=\"background:{{accent}};\">UK</span>\n <span class=\"regstw__chip regstw__chip--jp hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md\" style=\"background:{{accent}};\">JP</span>\n <span class=\"regstw__name regstw__name--us hidden font-semibold\">United States</span>\n <span class=\"regstw__name regstw__name--uk hidden font-semibold\">United Kingdom</span>\n <span class=\"regstw__name regstw__name--jp hidden font-semibold\">Japan</span>\n </div>\n <p class=\"m-0 text-base font-bold\">{{#if showDialCode}}<span class=\"regstw__dial regstw__dial--us hidden text-[#24143099]\">+1</span><span class=\"regstw__dial regstw__dial--uk hidden text-[#24143099]\">+44</span><span class=\"regstw__dial regstw__dial--jp hidden text-[#24143099]\">+81</span> {{/if}}{{phoneLocal}}</p>\n</div>\n<style>\n.regstw--us .regstw__chip--us, .regstw--uk .regstw__chip--uk, .regstw--jp .regstw__chip--jp { display: inline-block; }\n.regstw--us .regstw__name--us, .regstw--uk .regstw__name--uk, .regstw--jp .regstw__name--jp { display: inline; }\n.regstw--us .regstw__dial--us, .regstw--uk .regstw__dial--uk, .regstw--jp .regstw__dial--jp { display: inline; }\n</style>", "react": "export function RegionSelector({\n region = \"{{region}}\",\n showDialCode = {{showDialCode}},\n accent = \"{{accent}}\",\n phoneLocal = \"{{phoneLocal}}\",\n}) {\n const data = { us: { chip: \"US\", name: \"United States\", dial: \"+1\" }, uk: { chip: \"UK\", name: \"United Kingdom\", dial: \"+44\" }, jp: { chip: \"JP\", name: \"Japan\", dial: \"+81\" } }[region];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, marginBottom: 12 }}>\n <span style={{ fontWeight: 700, fontSize: 11, fontFamily: \"ui-monospace, monospace\", padding: \"4px 9px\", borderRadius: 6, background: accent }}>{data.chip}</span>\n <span style={{ fontWeight: 600 }}>{data.name}</span>\n </div>\n <p style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{showDialCode && <span style={{ color: \"#24143099\" }}>{data.dial} </span>}{phoneLocal}</p>\n </div>\n );\n}" }