Pager

7 of 10 digits

No dependencies
Code format
React + Tailwind
import { useId, useState } from 'react';

const MAX = 10;
// Seven-segment bars in a 12×20 cell, and which of them each digit lights.
const SEG: Record<string, string> = {
  a: 'M2.8 1H9.2L10.2 2L9.2 3H2.8L1.8 2Z',
  b: 'M10.4 2.6L11.4 3.6V8.4L10.4 9.4L9.4 8.4V3.6Z',
  c: 'M10.4 10.6L11.4 11.6V16.4L10.4 17.4L9.4 16.4V11.6Z',
  d: 'M2.8 17H9.2L10.2 18L9.2 19H2.8L1.8 18Z',
  e: 'M1.6 10.6L2.6 11.6V16.4L1.6 17.4L0.6 16.4V11.6Z',
  f: 'M1.6 2.6L2.6 3.6V8.4L1.6 9.4L0.6 8.4V3.6Z',
  g: 'M2.8 9H9.2L10.2 10L9.2 11H2.8L1.8 10Z',
};
const LIT = ['abcdef', 'bc', 'abged', 'abgcd', 'fgbc', 'afgcd', 'afgedc', 'abc', 'abcdefg', 'abcdfg'];

const css = `
  .field-pager { --body: light-dark(#42454c, #232529); --lcd: light-dark(#dbdde1, #7d8087); --seg: light-dark(#373a40, #121417); display: grid; justify-items: center; gap: 10px; }
  .field-pager__body { position: relative; display: block; width: 238px; height: 108px; border-radius: 20px 20px 16px 16px; background: linear-gradient(170deg, color-mix(in oklab, var(--body) 80%, light-dark(#373a40, #f1f2f3)), var(--body) 30%, color-mix(in oklab, var(--body) 85%, light-dark(#fbfcfd, #121417))); box-shadow: inset 0 1px 0 color-mix(in oklab, light-dark(#373a40, #f1f2f3) 18%, transparent), 0 14px 22px -10px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.6)); }
  .field-pager__body:has(.field-pager__input:focus-visible) { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
  .field-pager__input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; outline: none; cursor: text; }
  .field-pager__input::selection { background: transparent; }
  .field-pager__btn { position: absolute; top: -4px; width: 26px; height: 7px; border-radius: 3px 3px 0 0; background: color-mix(in oklab, var(--body) 75%, light-dark(#373a40, #f1f2f3)); }
  .field-pager__grip { position: absolute; right: 12px; top: 24px; width: 22px; height: 60px; background: repeating-linear-gradient(transparent 0 4px, color-mix(in oklab, var(--body) 70%, light-dark(#fbfcfd, #121417)) 4px 6px); border-radius: 4px; }
  /* The screen: grey LCD with every segment faintly there, lit ones dark. */
  .field-pager__lcd { position: absolute; left: 14px; top: 20px; width: 176px; height: 66px; border-radius: 6px; background: linear-gradient(160deg, color-mix(in oklab, var(--lcd) 90%, light-dark(#fbfcfd, #121417)), var(--lcd)); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--body) 70%, light-dark(#fbfcfd, #121417)), inset 0 4px 8px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.35)); transition: filter 0.3s; }
  .field-pager__body:has(.field-pager__input:focus) .field-pager__lcd { filter: brightness(1.14); }
  .field-pager__top { position: absolute; left: 10px; right: 10px; top: 9px; display: flex; justify-content: space-between; color: var(--seg); font: 700 7px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.12em; }
  .field-pager__digits { position: absolute; left: 9px; right: 9px; top: 26px; display: flex; align-items: center; justify-content: center; gap: 1.6px; transform: skewX(-7deg); }
  .field-pager__cell { width: 12px; height: 20px; overflow: visible; }
  .field-pager__cell path { fill: var(--seg); opacity: 0.1; }
  .field-pager__cell path.field-pager__on { opacity: 0.92; }
  .field-pager__cell--new path.field-pager__on { animation: field-pager-flick 0.28s steps(1); }
  @keyframes field-pager-flick { 0% { opacity: 0.25; } 30% { opacity: 0.92; } 55% { opacity: 0.4; } }
  .field-pager__dash { width: 5px; height: 2px; margin: 0 1px; background: var(--seg); opacity: 0.1; }
  .field-pager__dash--on { opacity: 0.9; }
  .field-pager__bell { opacity: 0.12; }
  .field-pager[data-done] .field-pager__bell { opacity: 1; animation: field-pager-ping 0.5s steps(1) 3; }
  @keyframes field-pager-ping { 50% { opacity: 0.12; } }
  .field-pager[data-done] .field-pager__body { animation: field-pager-buzz 0.9s; }
  @keyframes field-pager-buzz { 5%, 15%, 45%, 55% { transform: translateX(-2px) rotate(-0.8deg); } 10%, 20%, 50%, 60% { transform: translateX(2px) rotate(0.8deg); } 25%, 40%, 65%, 100% { transform: none; } }
  .field-pager__read { color: light-dark(#5f626a, #a7abb2); font: 500 11.5px system-ui, sans-serif; }
  .field-pager__read b { color: light-dark(#373a40, #f1f2f3); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) {
    .field-pager * { animation: none !important; transition: none !important; }
  }
`;

export function Preview() {
  const id = useId();
  const [num, setNum] = useState('5550123');
  const done = num.length === MAX;
  const cells = Array.from({ length: MAX }, (_, i) => num[i]);
  return (
    <>
      <style href="kit-inputs-pager" precedence="kit">
        {css}
      </style>
      <div className="field-pager" data-done={done || undefined}>
        <label className="field-pager__body" htmlFor={id}>
          <span className="field-pager__btn" style={{ left: 34 }} aria-hidden="true" />
          <span className="field-pager__btn" style={{ left: 68 }} aria-hidden="true" />
          <span className="field-pager__grip" aria-hidden="true" />
          <span className="field-pager__lcd" aria-hidden="true">
            <span className="field-pager__top">
              <span>{done ? 'PAGE SENT' : 'CALLBACK #'}</span>
              <span>
                <span className="field-pager__bell">♪</span> 09:41
              </span>
            </span>
            <span className="field-pager__digits">
              {cells.map((d, i) => (
                <span key={i} style={{ display: 'contents' }}>
                  {(i === 3 || i === 6) && <span className={`field-pager__dash${num.length > i ? ' field-pager__dash--on' : ''}`} />}
                  <svg key={`${i}${d ?? ''}`} className={`field-pager__cell${d && i === num.length - 1 ? ' field-pager__cell--new' : ''}`} viewBox="0 0 12 20">
                    {Object.entries(SEG).map(([k, path]) => (
                      <path key={k} d={path} className={d && LIT[Number(d)].includes(k) ? 'field-pager__on' : undefined} />
                    ))}
                  </svg>
                </span>
              ))}
            </span>
          </span>
          <input
            id={id}
            className="field-pager__input"
            type="tel"
            inputMode="numeric"
            autoComplete="tel-national"
            maxLength={MAX}
            aria-label="Callback number"
            value={num}
            onChange={(e) => setNum(e.target.value.replace(/\D/g, '').slice(0, MAX))}
          />
        </label>
        <p className="field-pager__read" aria-live="polite">
          {done ? (
            <b>Number set, paging you back</b>
          ) : (
            <span>
              <b>{num.length}</b> of {MAX} digits
            </span>
          )}
        </p>
      </div>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/input-pager
Source on GitHub

About this component

A callback number on a pager: digits light up on the seven-segment screen as you type, and a complete number makes the pager buzz and ring.

Dependencies
None
Difficulty
Intermediate
Triggers
state change, focus, keyframe
Techniques
svg, keyframes, state machine
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

One native input named "Callback number" with autocomplete tel-national, transparent over the pager; focus outlines the body and brightens the screen. The count and the confirmation are read out from an aria-live line. Under prefers-reduced-motion the digits light at once and the pager stays still.

More inputs

See all
Plate
Polygraph
Punch Card
Sand