UIコンポーネント簡単

Onboarding — Role / intent picker

A polished onboarding step that asks new users what brings them to the product and tailors the workspace around the answer. A grid of selectable cards — Founder, Developer, Designer, Marketer, Operations, Just exploring — each pairs an inline SVG icon with a label and a one-line outcome, with a popular badge on the lead choice. The Continue button stays disabled until a pick is made, then fires a role-specific next-step toast. A segmented switcher flips between single and multi-select and between a card grid and a compact list, all keyboard-navigable.

Labで開く

html css vanilla-js

ターゲット: JS HTML

コード

:root {
  --brand: #5b5bf0;
  --brand-d: #4646d6;
  --brand-700: #3a3ab8;
  --brand-50: #eef0ff;
  --accent: #00b4a6;
  --accent-soft: #d8f5f2;
  --ink: #101322;
  --ink-2: #3a4060;
  --muted: #6c7393;
  --bg: #f6f7fb;
  --white: #ffffff;
  --surface: #ffffff;
  --line: rgba(16, 19, 34, 0.1);
  --line-2: rgba(16, 19, 34, 0.16);
  --ok: #2f9e6f;
  --warn: #d98a2b;
  --danger: #d4503e;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --sh-sm: 0 1px 2px rgba(16, 19, 34, 0.08);
  --sh-lg: 0 8px 24px rgba(16, 19, 34, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--brand-50), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* ---------- header ---------- */
.card__head {
  padding: 28px 32px 8px;
}

.progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.progress__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
  flex: 0 0 auto;
}

.progress__dot.is-done {
  background: var(--brand);
}

.progress__dot.is-active {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}

.progress__bar {
  height: 3px;
  flex: 1 1 auto;
  border-radius: 2px;
  background: var(--line-2);
  max-width: 64px;
}

.progress__bar.is-done {
  background: var(--brand);
}

.step {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.card__head h1 {
  margin: 0 0 8px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 52ch;
}

/* ---------- switcher ---------- */
.switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 4px;
}

.switcher__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  gap: 2px;
}

.seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.seg__btn:hover {
  color: var(--ink);
}

.seg__btn.is-active {
  background: var(--white);
  color: var(--brand-700);
  box-shadow: var(--sh-sm);
}

/* ---------- options ---------- */
.roles {
  padding: 22px 32px 8px;
  display: grid;
  gap: 12px;
}

.roles.is-grid {
  grid-template-columns: repeat(2, 1fr);
}

.roles.is-list {
  grid-template-columns: 1fr;
}

.role {
  position: relative;
  display: flex;
  gap: 14px;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  padding: 16px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease,
    background 0.16s ease;
}

.role:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

.role:active {
  transform: translateY(0);
}

.role.is-selected {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand) inset, var(--sh-sm);
}

.role__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-50);
  color: var(--brand-d);
  transition: background 0.16s ease, color 0.16s ease;
}

.role.is-selected .role__icon {
  background: var(--brand);
  color: var(--white);
}

.role__icon svg {
  width: 22px;
  height: 22px;
}

.role__body {
  min-width: 0;
}

.role__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 2px;
}

.role__badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
}

.role__desc {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
}

/* selection indicator */
.role__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--white);
  display: grid;
  place-items: center;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.role[data-shape="check"] .role__check {
  border-radius: 6px;
}

.role__check svg {
  width: 12px;
  height: 12px;
  color: var(--white);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.role.is-selected .role__check {
  background: var(--brand);
  border-color: var(--brand);
}

.role.is-selected .role__check svg {
  opacity: 1;
  transform: scale(1);
}

.role:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 91, 240, 0.35);
}

/* compact list tweaks */
.roles.is-list .role {
  padding: 12px 14px;
}

.roles.is-list .role__icon {
  width: 36px;
  height: 36px;
}

.roles.is-list .role__icon svg {
  width: 19px;
  height: 19px;
}

.roles.is-list .role__desc {
  font-size: 0.84rem;
}

/* ---------- footer ---------- */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px 26px;
  margin-top: 8px;
}

.hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  min-width: 0;
}

.hint strong {
  color: var(--ink-2);
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.12s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 91, 240, 0.35);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
}

.btn--ghost:hover {
  background: var(--bg);
  color: var(--ink);
}

.btn--primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--sh-sm);
}

.btn--primary:hover:not(:disabled) {
  background: var(--brand-d);
  transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--primary svg {
  transition: transform 0.16s ease;
}

.btn--primary:hover:not(:disabled) svg {
  transform: translateX(3px);
}

/* ---------- toast ---------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.toast__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--white);
  margin-top: 1px;
}

.toast__icon svg {
  width: 13px;
  height: 13px;
}

.toast strong {
  font-weight: 700;
}

.toast small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  margin-top: 1px;
}

/* ---------- responsive ---------- */
@media (max-width: 520px) {
  .page {
    padding: 20px 12px 40px;
  }

  .card__head {
    padding: 22px 18px 4px;
  }

  .card__head h1 {
    font-size: 1.42rem;
  }

  .roles {
    padding: 18px 18px 4px;
  }

  .roles.is-grid {
    grid-template-columns: 1fr;
  }

  .switcher {
    gap: 8px;
  }

  .card__foot {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 18px 22px;
  }

  .hint {
    order: 2;
    text-align: center;
  }

  .actions {
    order: 1;
  }

  .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

(function () {
  "use strict";

  /* ---------- data ---------- */
  var ROLES = [
    {
      id: "founder",
      label: "Founder",
      badge: "Popular",
      desc: "Set up the company workspace and invite your first teammates.",
      next: "We'll spin up a company workspace and a 30-day plan board.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 3 7v6c0 5 3.8 8.3 9 9 5.2-.7 9-4 9-9V7z"/><path d="m9 12 2 2 4-4"/></svg>'
    },
    {
      id: "developer",
      label: "Developer",
      desc: "Connect your repos and wire up CI status into your boards.",
      next: "We'll surface the API keys and a GitHub/GitLab integration first.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 8-4 4 4 4"/><path d="m16 8 4 4-4 4"/><path d="m13 5-2 14"/></svg>'
    },
    {
      id: "designer",
      label: "Designer",
      desc: "Pull in Figma files and keep specs next to the work.",
      next: "We'll open the Figma sync and a handoff-ready component view.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 4 5 5L8 21l-5 1 1-5z"/><path d="m13 6 5 5"/></svg>'
    },
    {
      id: "marketer",
      label: "Marketer",
      desc: "Plan campaigns and track launches on a shared calendar.",
      next: "We'll start you on a campaign calendar with launch templates.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6l-5 4H4a1 1 0 0 0-1 1z"/><path d="M16 9a3 3 0 0 1 0 6"/><path d="M19 6a7 7 0 0 1 0 12"/></svg>'
    },
    {
      id: "operations",
      label: "Operations",
      desc: "Standardize workflows and automate recurring busywork.",
      next: "We'll preload automation recipes and a process library.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.2a1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 4.6 15H4.4a2 2 0 1 1 0-4h.2a1.7 1.7 0 0 0 1.2-2.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 11 4.6V4.4a2 2 0 1 1 4 0v.2a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0 1.2 2.9h.2a2 2 0 1 1 0 4z"/></svg>'
    },
    {
      id: "other",
      label: "Just exploring",
      desc: "Take a tour with sample data before committing to a setup.",
      next: "We'll drop you into a sandbox project with example data.",
      icon:
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>'
    }
  ];

  /* ---------- state ---------- */
  var state = { mode: "single", layout: "grid", selected: [] };

  var rolesEl = document.getElementById("roles");
  var continueBtn = document.getElementById("continue");
  var skipBtn = document.getElementById("skip");
  var hintEl = document.getElementById("hint");
  var toasts = document.getElementById("toasts");

  /* ---------- toast helper ---------- */
  var CHECK_SVG =
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>';

  function toast(title, sub) {
    var el = document.createElement("div");
    el.className = "toast";
    el.setAttribute("role", "status");
    el.innerHTML =
      '<span class="toast__icon" aria-hidden="true">' +
      CHECK_SVG +
      "</span><span><strong>" +
      title +
      "</strong>" +
      (sub ? "<small>" + sub + "</small>" : "") +
      "</span>";
    toasts.appendChild(el);
    requestAnimationFrame(function () {
      el.classList.add("is-in");
    });
    setTimeout(function () {
      el.classList.remove("is-in");
      setTimeout(function () {
        el.remove();
      }, 240);
    }, 3600);
  }

  /* ---------- render ---------- */
  function render() {
    rolesEl.className = "roles " + (state.layout === "grid" ? "is-grid" : "is-list");
    rolesEl.setAttribute(
      "role",
      state.mode === "single" ? "radiogroup" : "group"
    );
    rolesEl.innerHTML = "";

    ROLES.forEach(function (role, i) {
      var isSel = state.selected.indexOf(role.id) !== -1;
      var multi = state.mode === "multi";
      var btn = document.createElement("button");
      btn.type = "button";
      btn.className = "role" + (isSel ? " is-selected" : "");
      btn.dataset.id = role.id;
      btn.dataset.shape = multi ? "check" : "radio";
      btn.setAttribute("role", multi ? "checkbox" : "radio");
      btn.setAttribute("aria-checked", isSel ? "true" : "false");
      // roving tabindex for the radio pattern
      if (!multi) {
        var anySel = state.selected.length > 0;
        var focusable = anySel ? isSel : i === 0;
        btn.tabIndex = focusable ? 0 : -1;
      } else {
        btn.tabIndex = 0;
      }

      btn.innerHTML =
        '<span class="role__icon" aria-hidden="true">' +
        role.icon +
        "</span>" +
        '<span class="role__body">' +
        '<span class="role__label">' +
        role.label +
        (role.badge
          ? '<span class="role__badge">' + role.badge + "</span>"
          : "") +
        "</span>" +
        '<p class="role__desc">' +
        role.desc +
        "</p>" +
        "</span>" +
        '<span class="role__check" aria-hidden="true">' +
        CHECK_SVG +
        "</span>";

      rolesEl.appendChild(btn);
    });

    updateFooter();
  }

  function updateFooter() {
    var n = state.selected.length;
    if (n === 0) {
      continueBtn.disabled = true;
      hintEl.textContent =
        state.mode === "multi"
          ? "Select one or more options to continue."
          : "Select an option to continue.";
      return;
    }
    continueBtn.disabled = false;
    if (state.mode === "multi") {
      var labels = state.selected.map(labelFor).join(", ");
      hintEl.innerHTML =
        n +
        " selected &mdash; <strong>" +
        labels +
        "</strong>";
    } else {
      var role = byId(state.selected[0]);
      hintEl.innerHTML = "<strong>" + role.label + "</strong> &mdash; " + role.next;
    }
  }

  function byId(id) {
    return ROLES.filter(function (r) {
      return r.id === id;
    })[0];
  }
  function labelFor(id) {
    return byId(id).label;
  }

  /* ---------- selection ---------- */
  function toggle(id) {
    var idx = state.selected.indexOf(id);
    if (state.mode === "single") {
      state.selected = idx === -1 ? [id] : [];
    } else {
      if (idx === -1) state.selected.push(id);
      else state.selected.splice(idx, 1);
    }
    syncSelectedClasses();
    updateFooter();
  }

  function syncSelectedClasses() {
    var nodes = rolesEl.querySelectorAll(".role");
    nodes.forEach(function (node) {
      var sel = state.selected.indexOf(node.dataset.id) !== -1;
      node.classList.toggle("is-selected", sel);
      node.setAttribute("aria-checked", sel ? "true" : "false");
      if (state.mode === "single") {
        var anySel = state.selected.length > 0;
        node.tabIndex = anySel ? (sel ? 0 : -1) : node.tabIndex;
      }
    });
  }

  /* ---------- events ---------- */
  rolesEl.addEventListener("click", function (e) {
    var btn = e.target.closest(".role");
    if (!btn) return;
    toggle(btn.dataset.id);
  });

  // keyboard: arrow nav for radio mode, space/enter toggle
  rolesEl.addEventListener("keydown", function (e) {
    var btn = e.target.closest(".role");
    if (!btn) return;
    var nodes = Array.prototype.slice.call(rolesEl.querySelectorAll(".role"));
    var i = nodes.indexOf(btn);

    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      toggle(btn.dataset.id);
      return;
    }

    var dir = 0;
    if (e.key === "ArrowDown" || e.key === "ArrowRight") dir = 1;
    if (e.key === "ArrowUp" || e.key === "ArrowLeft") dir = -1;
    if (!dir) return;
    e.preventDefault();
    var next = nodes[(i + dir + nodes.length) % nodes.length];
    next.focus();
    if (state.mode === "single") {
      nodes.forEach(function (n) {
        n.tabIndex = -1;
      });
      next.tabIndex = 0;
      toggle(next.dataset.id);
    }
  });

  // variant switcher
  document.querySelectorAll(".seg").forEach(function (group) {
    group.addEventListener("click", function (e) {
      var btn = e.target.closest(".seg__btn");
      if (!btn) return;
      var siblings = group.querySelectorAll(".seg__btn");
      siblings.forEach(function (s) {
        s.classList.remove("is-active");
        s.setAttribute("aria-checked", "false");
      });
      btn.classList.add("is-active");
      btn.setAttribute("aria-checked", "true");

      if (btn.dataset.mode) {
        state.mode = btn.dataset.mode;
        // collapse to first selection when switching to single
        if (state.mode === "single" && state.selected.length > 1) {
          state.selected = [state.selected[0]];
        }
        render();
      } else if (btn.dataset.layout) {
        state.layout = btn.dataset.layout;
        render();
      }
    });
  });

  // continue
  continueBtn.addEventListener("click", function () {
    if (state.selected.length === 0) return;
    if (state.mode === "single") {
      var role = byId(state.selected[0]);
      toast("Great choice, " + role.label.toLowerCase() + "!", role.next);
    } else {
      toast(
        "You're all set",
        "Tailoring for: " + state.selected.map(labelFor).join(", ") + "."
      );
    }
    continueBtn.classList.add("is-pulsed");
  });

  // skip
  skipBtn.addEventListener("click", function () {
    state.selected = [];
    syncSelectedClasses();
    updateFooter();
    toast("Skipped for now", "You can set your role later in Settings.");
  });

  /* ---------- init ---------- */
  render();
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Onboarding — Role / intent picker</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="page">
      <main class="card" aria-labelledby="onb-title">
        <header class="card__head">
          <div class="progress" aria-hidden="true">
            <span class="progress__dot is-done"></span>
            <span class="progress__bar is-done"></span>
            <span class="progress__dot is-active"></span>
            <span class="progress__bar"></span>
            <span class="progress__dot"></span>
          </div>
          <p class="step">Step 2 of 3</p>
          <h1 id="onb-title">What brings you to Driftwork?</h1>
          <p class="lede">
            Pick what fits you best and we&rsquo;ll tailor your workspace, templates and
            starter tips around it.
          </p>

          <div class="switcher" role="group" aria-label="Picker variant">
            <span class="switcher__label">Mode</span>
            <div class="seg" role="radiogroup" aria-label="Selection mode">
              <button class="seg__btn is-active" role="radio" aria-checked="true" data-mode="single">
                Single-select
              </button>
              <button class="seg__btn" role="radio" aria-checked="false" data-mode="multi">
                Multi-select
              </button>
            </div>
            <div class="seg" role="radiogroup" aria-label="Layout">
              <button class="seg__btn is-active" role="radio" aria-checked="true" data-layout="grid">
                Card grid
              </button>
              <button class="seg__btn" role="radio" aria-checked="false" data-layout="list">
                Compact list
              </button>
            </div>
          </div>
        </header>

        <div
          class="roles is-grid"
          id="roles"
          role="radiogroup"
          aria-label="What brings you here?"
        >
          <!-- options injected by script.js -->
        </div>

        <footer class="card__foot">
          <p class="hint" id="hint" aria-live="polite">Select an option to continue.</p>
          <div class="actions">
            <button class="btn btn--ghost" type="button" id="skip">Skip for now</button>
            <button class="btn btn--primary" type="button" id="continue" disabled>
              Continue
              <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                <path
                  d="M5 12h14M13 6l6 6-6 6"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
        </footer>
      </main>
    </div>

    <div class="toast-wrap" id="toasts" aria-live="polite" aria-atomic="true"></div>
    <script src="script.js"></script>
  </body>
</html>

Role / intent picker

The classic “What brings you here?” onboarding step, rendered as a self-contained card. A progress rail and Step 2 of 3 label frame a grid of intent cards for the fictional Driftwork app — Founder, Developer, Designer, Marketer, Operations and a low-commitment Just exploring option. Each card carries an inline SVG icon, a bold label (the lead option gets a Popular badge), a one-line description of the outcome, and a selection indicator that animates in on pick. The footer hint mirrors the choice back to the user with a tailored next step, and the Continue button stays disabled until something is selected.

Two segmented controls drive the live variants. The first toggles single-select (radiogroup semantics, one choice replaces the last, selection indicators render as circles) against multi-select (checkbox semantics, additive choices, square indicators, and a “3 selected” hint). The second swaps the card grid for a compact list layout. Switching from multi back to single gracefully collapses to the first pick.

Interactions are vanilla JS and keyboard-friendly: arrow keys rove across the options with proper roving-tabindex, Space and Enter toggle, and aria-checked plus an aria-live hint keep assistive tech in sync. Continue fires a role-specific confirmation toast (the Developer path mentions repos, the Designer path mentions Figma), Skip for now clears the selection, and the whole layout collapses to a single column down to 360px.

Illustrative UI only — Driftwork and all roles/data are fictional.