Version Selector

Selects a file version.

html

<div class="vsel" data-selected="v3 (latest)">
  <label class="vsel__label" for="vsel-select-v3">Version of roadmap.pdf</label>
  <select id="vsel-select-v3" class="vsel__select vsel__select--v3" style="--accent:#A8E6C1;">
    <option selected>v3 (latest)</option><option>v2</option><option>v1</option>
  </select>
  <select id="vsel-select-v2" class="vsel__select vsel__select--v2" style="--accent:#A8E6C1;">
    <option>v3 (latest)</option><option selected>v2</option><option>v1</option>
  </select>
  <select id="vsel-select-v1" class="vsel__select vsel__select--v1" style="--accent:#A8E6C1;">
    <option>v3 (latest)</option><option>v2</option><option selected>v1</option>
  </select>
  <p class="vsel__current">Viewing <strong>v3 (latest)</strong> &middot; saved <time datetime="2026-08-14T10:20">14 Aug, 10:20am</time></p>
</div>
<style>
.vsel { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; padding: 14px 16px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; }
.vsel__label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 12px; color: #24143099; }
.vsel__select { display: none; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; background: #FAF7F2; margin-bottom: 10px; }
.vsel[data-selected="v3 (latest)"] .vsel__select--v3 { display: block; }
.vsel[data-selected="v2"] .vsel__select--v2 { display: block; }
.vsel[data-selected="v1"] .vsel__select--v1 { display: block; }
.vsel__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vsel__current { margin: 0; font-size: 12px; color: #24143099; }
.vsel__current strong { color: #241430; }
</style>

tailwind

<div class="w-[280px] p-[14px_16px] rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] vsel-tw" data-selected="v3 (latest)" style="--accent:#A8E6C1">
  <label class="block mb-1.5 font-bold text-xs text-[#241430]/60" for="vsel-tw-select-v3">Version of roadmap.pdf</label>
  <select id="vsel-tw-select-v3" class="vsel-tw-select vsel-tw-select--v3 hidden w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit] bg-[#FAF7F2] mb-2.5">
    <option selected>v3 (latest)</option><option>v2</option><option>v1</option>
  </select>
  <select id="vsel-tw-select-v2" class="vsel-tw-select vsel-tw-select--v2 hidden w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit] bg-[#FAF7F2] mb-2.5">
    <option>v3 (latest)</option><option selected>v2</option><option>v1</option>
  </select>
  <select id="vsel-tw-select-v1" class="vsel-tw-select vsel-tw-select--v1 hidden w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit] bg-[#FAF7F2] mb-2.5">
    <option>v3 (latest)</option><option>v2</option><option selected>v1</option>
  </select>
  <p class="m-0 text-xs text-[#241430]/60">Viewing <strong class="text-[#241430]">v3 (latest)</strong> &middot; saved <time datetime="2026-08-14T10:20">14 Aug, 10:20am</time></p>
</div>
<style>
.vsel-tw[data-selected="v3 (latest)"] .vsel-tw-select--v3 { display: block; }
.vsel-tw[data-selected="v2"] .vsel-tw-select--v2 { display: block; }
.vsel-tw[data-selected="v1"] .vsel-tw-select--v1 { display: block; }
.vsel-tw-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
</style>

react

export function VersionSelector({
  fileName = "roadmap.pdf",
  selectedVersion = "v3 (latest)",
  showTimestamps = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, padding: "14px 16px", borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <label htmlFor="vsel-react-select" style={{ display: "block", marginBottom: 6, fontWeight: 700, fontSize: 12, color: "#24143099" }}>Version of {fileName}</label>
      <select id="vsel-react-select" defaultValue={selectedVersion} style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", borderRadius: 8, border: `1.5px solid #24143030`, font: "inherit", background: "#FAF7F2", marginBottom: 10 }}>
        <option>v3 (latest)</option>
        <option>v2</option>
        <option>v1</option>
      </select>
      <p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>Viewing <strong style={{ color: "#241430" }}>{selectedVersion}</strong>{showTimestamps && <> &middot; saved <time dateTime="2026-08-14T10:20">14 Aug, 10:20am</time></>}</p>
    </div>
  );
}