Notification Preferences

Controls notification behaviour.

html

<form class="prefs" aria-labelledby="prefs-h" style="--gap:14px;">
  <h2 id="prefs-h" class="prefs__title">Notification settings</h2>
  <p class="prefs__channel">Primary channel: <strong>email</strong></p>
  <div class="prefs__row">
    <label for="pf-mentions">Mentions</label>
    <input id="pf-mentions" type="checkbox" checked style="accent-color:#BFD9F2;" />
  </div>
  <div class="prefs__row">
    <label for="pf-approvals">Approvals</label>
    <input id="pf-approvals" type="checkbox" checked style="accent-color:#BFD9F2;" />
  </div>
  <div class="prefs__row">
    <label for="pf-digest">Daily digest</label>
    <input id="pf-digest" type="checkbox" checked style="accent-color:#BFD9F2;" />
  </div>
</form>
<style>
.prefs { font: 14px/1.5 system-ui, sans-serif; width: 300px; background: #FAF7F2; color: #241430; padding: 18px 20px; border-radius: 12px; box-shadow: 0 8px 24px rgba(36,20,48,.14); }
.prefs__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.prefs__channel { margin: 0 0 12px; font-size: 13px; color: #24143099; }
.prefs__row { display: flex; align-items: center; justify-content: space-between; padding: var(--gap) 0; border-top: 1px solid #24143015; }
.prefs__row:first-of-type { border-top: none; }
.prefs__row input:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<form aria-labelledby="prefs-tw-h" class="w-72 bg-[#FAF7F2] text-[#241430] px-5 py-4.5 rounded-xl shadow-md font-sans text-sm">
  <h2 id="prefs-tw-h" class="m-0 mb-1 text-base font-semibold">Notification settings</h2>
  <p class="m-0 mb-3 text-[13px] text-[#241430]/60">Primary channel: <strong>email</strong></p>
  <div class="flex items-center justify-between border-t border-[#24143015] first:border-t-0" style="padding-top:14px;padding-bottom:14px">
    <label for="pftw-mentions">Mentions</label>
    <input id="pftw-mentions" type="checkbox" checked style="accent-color:#BFD9F2" />
  </div>
  <div class="flex items-center justify-between border-t border-[#24143015]" style="padding-top:14px;padding-bottom:14px">
    <label for="pftw-approvals">Approvals</label>
    <input id="pftw-approvals" type="checkbox" checked style="accent-color:#BFD9F2" />
  </div>
  <div class="flex items-center justify-between border-t border-[#24143015]" style="padding-top:14px;padding-bottom:14px">
    <label for="pftw-digest">Daily digest</label>
    <input id="pftw-digest" type="checkbox" checked style="accent-color:#BFD9F2" />
  </div>
</form>

react

export function NotificationPreferences({
  heading = "Notification settings",
  channel = "email",
  accent = "#BFD9F2",
  digestOn = true,
  rowGap = 14,
}) {
  const row = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: `${rowGap}px 0`, borderTop: "1px solid #24143015" };
  return (
    <form aria-labelledby="prefs-react-h" style={{ width: 300, background: "#FAF7F2", color: "#241430", padding: "18px 20px", borderRadius: 12, boxShadow: "0 8px 24px rgba(36,20,48,.14)", fontFamily: "system-ui, sans-serif", fontSize: 14 }}>
      <h2 id="prefs-react-h" style={{ margin: "0 0 4px", fontSize: 16, fontWeight: 600 }}>{heading}</h2>
      <p style={{ margin: "0 0 12px", fontSize: 13, color: "#24143099" }}>Primary channel: <strong>{channel}</strong></p>
      <div style={{ ...row, borderTop: "none" }}>
        <label htmlFor="pfr-mentions">Mentions</label>
        <input id="pfr-mentions" type="checkbox" defaultChecked style={{ accentColor: accent }} />
      </div>
      <div style={row}>
        <label htmlFor="pfr-approvals">Approvals</label>
        <input id="pfr-approvals" type="checkbox" defaultChecked style={{ accentColor: accent }} />
      </div>
      <div style={row}>
        <label htmlFor="pfr-digest">Daily digest</label>
        <input id="pfr-digest" type="checkbox" checked={digestOn} onChange={() => {}} style={{ accentColor: accent }} />
      </div>
    </form>
  );
}