PIN Input

Numeric PIN entry.

html

<fieldset class="pin">
  <legend class="pin__legend">Enter your 4-digit PIN</legend>
  <div class="pin__row" style="--accent:#F5C2E0;--size:44px;">
    <input class="pin__box pin__box--boxes" type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 1">
    <input class="pin__box pin__box--boxes" type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 2">
    <input class="pin__box pin__box--boxes" type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 3">
    <input class="pin__box pin__box--boxes" type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 4">
  </div>
</fieldset>
<style>
.pin { font: 14px system-ui, sans-serif; color: #241430; border: none; padding: 0; margin: 0; max-width: 260px; }
.pin__legend { font-weight: 500; margin-bottom: 8px; padding: 0; }
.pin__row { display: flex; gap: 8px; }
.pin__box { width: var(--size); height: var(--size); box-sizing: border-box; text-align: center; font: inherit; font-size: 18px; color: #241430; background: #FAF7F2; }
.pin__box--boxes { border: 1.5px solid #24143040; border-radius: 8px; }
.pin__box--underline { border: none; border-bottom: 2px solid #24143040; border-radius: 0; }
.pin__box:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.pin__box--underline:focus-visible { box-shadow: none; }
</style>

tailwind

<fieldset class="font-sans text-sm text-[#241430] border-0 p-0 m-0 max-w-[260px]">
  <legend class="font-medium mb-2 p-0">Enter your 4-digit PIN</legend>
  <div class="flex gap-2">
    <input type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 1" class="pin-tw pin-tw--boxes box-border text-center text-lg bg-[#FAF7F2] focus-visible:outline-none" style="width:44px;height:44px;border-color:#F5C2E0;">
    <input type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 2" class="pin-tw pin-tw--boxes box-border text-center text-lg bg-[#FAF7F2] focus-visible:outline-none" style="width:44px;height:44px;border-color:#F5C2E0;">
    <input type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 3" class="pin-tw pin-tw--boxes box-border text-center text-lg bg-[#FAF7F2] focus-visible:outline-none" style="width:44px;height:44px;border-color:#F5C2E0;">
    <input type="password" inputmode="numeric" maxlength="1" aria-label="PIN digit 4" class="pin-tw pin-tw--boxes box-border text-center text-lg bg-[#FAF7F2] focus-visible:outline-none" style="width:44px;height:44px;border-color:#F5C2E0;">
  </div>
</fieldset>
<style>
.pin-tw--boxes { border: 1.5px solid #24143040; border-radius: 8px; }
.pin-tw--underline { border: none; border-bottom: 2px solid #24143040; border-radius: 0; }
</style>

react

export function PinInput({
  label = "Enter your 4-digit PIN",
  masked = true,
  variant = "boxes",
  boxSize = 44,
  accent = "#F5C2E0",
}) {
  const boxStyle = {
    width: boxSize, height: boxSize, boxSizing: "border-box", textAlign: "center", font: "inherit", fontSize: 18,
    color: "#241430", background: "#FAF7F2",
    border: variant === "underline" ? "none" : `1.5px solid ${accent}`,
    borderBottom: variant === "underline" ? `2px solid ${accent}` : undefined,
    borderRadius: variant === "underline" ? 0 : 8,
  };
  return (
    <fieldset style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", border: "none", padding: 0, margin: 0, maxWidth: 260 }}>
      <legend style={{ fontWeight: 500, marginBottom: 8, padding: 0 }}>{label}</legend>
      <div style={{ display: "flex", gap: 8 }}>
        {[1, 2, 3, 4].map((n) => (
          <input key={n} type={masked ? "password" : "text"} inputMode="numeric" maxLength={1} aria-label={`PIN digit ${n}`} style={boxStyle} />
        ))}
      </div>
    </fieldset>
  );
}