Region Selector

Control for choosing a country/region.

html

<div class="regs regs--us">
  <div class="regs__control">
    <span class="regs__chip regs__chip--us" style="background:#BFD9F2;">US</span>
    <span class="regs__chip regs__chip--uk" style="background:#BFD9F2;">UK</span>
    <span class="regs__chip regs__chip--jp" style="background:#BFD9F2;">JP</span>
    <span class="regs__name regs__name--us">United States</span>
    <span class="regs__name regs__name--uk">United Kingdom</span>
    <span class="regs__name regs__name--jp">Japan</span>
  </div>
  <p class="regs__phone"><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> 555 123 4567</p>
</div>
<style>
.regs { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.regs__control { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.regs__chip { display: none; font: 700 11px ui-monospace, monospace; padding: 4px 9px; border-radius: 6px; }
.regs__name { display: none; font-weight: 600; }
.regs--us .regs__chip--us, .regs--uk .regs__chip--uk, .regs--jp .regs__chip--jp { display: inline-block; }
.regs--us .regs__name--us, .regs--uk .regs__name--uk, .regs--jp .regs__name--jp { display: inline; }
.regs__phone { margin: 0; font-size: 16px; font-weight: 700; }
.regs__dial { display: none; color: #24143099; }
.regs--us .regs__dial--us, .regs--uk .regs__dial--uk, .regs--jp .regs__dial--jp { display: inline; }
</style>

tailwind

<div class="regstw regstw--us font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <div class="flex items-center gap-2 mb-3">
    <span class="regstw__chip regstw__chip--us hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md" style="background:#BFD9F2;">US</span>
    <span class="regstw__chip regstw__chip--uk hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md" style="background:#BFD9F2;">UK</span>
    <span class="regstw__chip regstw__chip--jp hidden font-bold text-[11px] font-mono py-1 px-2.5 rounded-md" style="background:#BFD9F2;">JP</span>
    <span class="regstw__name regstw__name--us hidden font-semibold">United States</span>
    <span class="regstw__name regstw__name--uk hidden font-semibold">United Kingdom</span>
    <span class="regstw__name regstw__name--jp hidden font-semibold">Japan</span>
  </div>
  <p class="m-0 text-base font-bold"><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> 555 123 4567</p>
</div>
<style>
.regstw--us .regstw__chip--us, .regstw--uk .regstw__chip--uk, .regstw--jp .regstw__chip--jp { display: inline-block; }
.regstw--us .regstw__name--us, .regstw--uk .regstw__name--uk, .regstw--jp .regstw__name--jp { display: inline; }
.regstw--us .regstw__dial--us, .regstw--uk .regstw__dial--uk, .regstw--jp .regstw__dial--jp { display: inline; }
</style>

react

export function RegionSelector({
  region = "us",
  showDialCode = true,
  accent = "#BFD9F2",
  phoneLocal = "555 123 4567",
}) {
  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];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <span style={{ fontWeight: 700, fontSize: 11, fontFamily: "ui-monospace, monospace", padding: "4px 9px", borderRadius: 6, background: accent }}>{data.chip}</span>
        <span style={{ fontWeight: 600 }}>{data.name}</span>
      </div>
      <p style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{showDialCode && <span style={{ color: "#24143099" }}>{data.dial} </span>}{phoneLocal}</p>
    </div>
  );
}