Segmented Control

Compact mutually exclusive options.

html

<div class="segmented segmented--comfortable" role="radiogroup" aria-label="View period" style="--accent:#241430;border-radius:10px;">
  <label class="segmented__seg">
    <input type="radio" name="seg" class="segmented__input" checked>
    <span>Day</span>
  </label>
  <label class="segmented__seg">
    <input type="radio" name="seg" class="segmented__input">
    <span>Week</span>
  </label>
</div>
<style>
.segmented { display: inline-flex; background: #FAF7F2; padding: 3px; gap: 2px; font: 500 14px system-ui, sans-serif; color: #241430; border: 1.5px solid #24143020; }
.segmented__seg { position: relative; cursor: pointer; border-radius: calc(var(--radius, 10px) - 3px); overflow: hidden; }
.segmented__seg span { display: block; padding: 8px 16px; }
.segmented--compact .segmented__seg span { padding: 5px 11px; font-size: 12px; }
.segmented__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__input:checked + span { background: var(--accent); color: #FAF7F2; }
.segmented__input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="segmented-tw segmented-tw--comfortable inline-flex bg-[#FAF7F2] p-[3px] gap-0.5 font-sans text-sm font-medium text-[#241430] border-[1.5px] border-[#24143020]" role="radiogroup" aria-label="View period" style="--accent:#241430;border-radius:10px;">
  <label class="relative cursor-pointer overflow-hidden rounded-[7px]">
    <input type="radio" name="seg-tw" class="segmented-input-tw absolute opacity-0 inset-0 m-0 cursor-pointer" checked>
    <span class="block px-4 py-2">Day</span>
  </label>
  <label class="relative cursor-pointer overflow-hidden rounded-[7px]">
    <input type="radio" name="seg-tw" class="segmented-input-tw absolute opacity-0 inset-0 m-0 cursor-pointer">
    <span class="block px-4 py-2">Week</span>
  </label>
</div>
<style>
.segmented-tw--compact span { padding: 5px 11px !important; font-size: 12px; }
.segmented-input-tw:checked + span { background: #241430; color: #FAF7F2; }
.segmented-input-tw:focus-visible + span { outline: 2px solid #241430; outline-offset: 2px; }
</style>

react

export function SegmentedControl({
  label = "View period",
  secondActive = false,
  density = "comfortable",
  accent = "#241430",
  radius = 10,
}) {
  const pad = density === "compact" ? "5px 11px" : "8px 16px";
  const fontSize = density === "compact" ? 12 : 14;
  const seg = (active) => ({
    display: "block", padding: pad, fontSize, borderRadius: Math.max(radius - 3, 0),
    background: active ? accent : "transparent", color: active ? "#FAF7F2" : "#241430",
  });
  return (
    <div role="radiogroup" aria-label={label} style={{
      display: "inline-flex", background: "#FAF7F2", padding: 3, gap: 2, borderRadius: radius,
      fontFamily: "system-ui, sans-serif", fontWeight: 500, border: "1.5px solid #24143020",
    }}>
      <label style={{ cursor: "pointer" }}><span style={seg(!secondActive)}>Day</span></label>
      <label style={{ cursor: "pointer" }}><span style={seg(secondActive)}>Week</span></label>
    </div>
  );
}