Pin Pad

Full-screen PIN entry for authentication, employee login, and secure access. Supports loading, error, and success states with animated dot indicators.

Basic Pin Pad

Preview

Enter your PIN

4 digits

<div class="pinpad">
  <p class="pinpad-label">Enter your PIN</p>
  <div class="pinpad-dots">
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
  </div>
  <div class="pinpad-grid">
    <button class="pinpad-key">1</button>
    <button class="pinpad-key">2</button>
    <button class="pinpad-key">3</button>
    <button class="pinpad-key">4</button>
    <button class="pinpad-key">5</button>
    <button class="pinpad-key">6</button>
    <button class="pinpad-key">7</button>
    <button class="pinpad-key">8</button>
    <button class="pinpad-key">9</button>
    <button class="pinpad-key pinpad-key-hidden"></button>
    <button class="pinpad-key">0</button>
    <button class="pinpad-key">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
    </button>
  </div>
  <p class="pinpad-hint">4 digits</p>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-6 p-6">
  <p class="text-sm text-base-content/60 m-0">Enter your PIN</p>
  <div class="flex gap-4">
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
  </div>
  <div class="grid grid-cols-3 gap-3 max-w-70">
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">1</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">2</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">3</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">4</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">5</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">6</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">7</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">8</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">9</button>
    <div class="invisible"></div>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">0</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">&larr;</button>
  </div>
  <p class="text-xs text-base-content/40 m-0">4 digits</p>
</div>

Requires: tw.min.css

// PIN pad logic — scoped per .pinpad container
const pad = document.querySelector('.pinpad');
const dots = pad.querySelectorAll('.pinpad-dot');
let pin = '';

pad.querySelectorAll('.pinpad-key').forEach(key => {
  key.addEventListener('click', () => {
    if (key.querySelector('svg')) {
      pin = pin.slice(0, -1);
    } else if (pin.length < dots.length) {
      pin += key.textContent.trim();
    }
    dots.forEach((dot, i) => {
      dot.classList.toggle('pinpad-dot-filled', i < pin.length);
    });
    if (pin.length === dots.length) {
      console.log('PIN entered:', pin);
    }
  });
});

With Avatar & Title

Preview

Welcome Back

Enter PIN to continue

<div class="pinpad">
  <div class="pinpad-avatar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
  </div>
  <h2 class="pinpad-title">Welcome Back</h2>
  <p class="pinpad-label">Enter PIN to continue</p>
  <div class="pinpad-dots">
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
    <div class="pinpad-dot"></div>
  </div>
  <div class="pinpad-grid">
    <button class="pinpad-key">1</button>
    <button class="pinpad-key">2</button>
    <button class="pinpad-key">3</button>
    <button class="pinpad-key">4</button>
    <button class="pinpad-key">5</button>
    <button class="pinpad-key">6</button>
    <button class="pinpad-key">7</button>
    <button class="pinpad-key">8</button>
    <button class="pinpad-key">9</button>
    <button class="pinpad-key pinpad-key-hidden"></button>
    <button class="pinpad-key">0</button>
    <button class="pinpad-key">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-6 p-6">
  <div class="w-16 h-16 rounded-full overflow-hidden flex items-center justify-center bg-base-200">
    <svg class="w-8 h-8 text-base-content/50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
  </div>
  <h2 class="text-xl font-semibold m-0 text-center">Welcome Back</h2>
  <p class="text-sm text-base-content/60 m-0">Enter PIN to continue</p>
  <div class="flex gap-4">
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
  </div>
  <div class="grid grid-cols-3 gap-3 max-w-70">
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">1</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">2</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">3</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">4</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">5</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">6</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">7</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">8</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">9</button>
    <div class="invisible"></div>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">0</button>
    <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">&larr;</button>
  </div>
</div>

Requires: tw.min.css

// Same logic — scope to each .pinpad container

Error & Success States

Preview

Enter your PIN

Incorrect PIN. Try again.

PIN Verified

Access granted

<div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;">
  <!-- Error State -->
  <div class="pinpad">
    <p class="pinpad-label">Enter your PIN</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot pinpad-dot-error"></div>
      <div class="pinpad-dot pinpad-dot-error"></div>
      <div class="pinpad-dot pinpad-dot-error"></div>
      <div class="pinpad-dot pinpad-dot-error"></div>
    </div>
    <p class="pinpad-error">Incorrect PIN. Try again.</p>
    <div class="pinpad-grid">
      <button class="pinpad-key">1</button>
      <button class="pinpad-key">2</button>
      <button class="pinpad-key">3</button>
      <button class="pinpad-key">4</button>
      <button class="pinpad-key">5</button>
      <button class="pinpad-key">6</button>
      <button class="pinpad-key">7</button>
      <button class="pinpad-key">8</button>
      <button class="pinpad-key">9</button>
      <button class="pinpad-key pinpad-key-hidden"></button>
      <button class="pinpad-key">0</button>
      <button class="pinpad-key">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
  </div>

  <!-- Success State -->
  <div class="pinpad">
    <p class="pinpad-label">PIN Verified</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot pinpad-dot-success"></div>
      <div class="pinpad-dot pinpad-dot-success"></div>
      <div class="pinpad-dot pinpad-dot-success"></div>
      <div class="pinpad-dot pinpad-dot-success"></div>
    </div>
    <p class="pinpad-success">Access granted</p>
    <div class="pinpad-grid">
      <button class="pinpad-key" disabled>1</button>
      <button class="pinpad-key" disabled>2</button>
      <button class="pinpad-key" disabled>3</button>
      <button class="pinpad-key" disabled>4</button>
      <button class="pinpad-key" disabled>5</button>
      <button class="pinpad-key" disabled>6</button>
      <button class="pinpad-key" disabled>7</button>
      <button class="pinpad-key" disabled>8</button>
      <button class="pinpad-key" disabled>9</button>
      <button class="pinpad-key pinpad-key-hidden" disabled></button>
      <button class="pinpad-key" disabled>0</button>
      <button class="pinpad-key" disabled>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;">
  <!-- Error State -->
  <div class="flex flex-col items-center gap-6 p-6">
    <p class="text-sm text-base-content/60 m-0">Enter your PIN</p>
    <div class="flex gap-4">
      <div class="w-4.5 h-4.5 rounded-full bg-error border-2 border-error shadow-[0_0_12px_var(--color-error)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-error border-2 border-error shadow-[0_0_12px_var(--color-error)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-error border-2 border-error shadow-[0_0_12px_var(--color-error)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-error border-2 border-error shadow-[0_0_12px_var(--color-error)]"></div>
    </div>
    <p class="text-sm text-error m-0">Incorrect PIN. Try again.</p>
  </div>

  <!-- Success State -->
  <div class="flex flex-col items-center gap-6 p-6">
    <p class="text-sm text-base-content/60 m-0">PIN Verified</p>
    <div class="flex gap-4">
      <div class="w-4.5 h-4.5 rounded-full bg-success border-2 border-success shadow-[0_0_12px_var(--color-success)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-success border-2 border-success shadow-[0_0_12px_var(--color-success)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-success border-2 border-success shadow-[0_0_12px_var(--color-success)]"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-success border-2 border-success shadow-[0_0_12px_var(--color-success)]"></div>
    </div>
    <p class="text-sm text-success m-0">Access granted</p>
  </div>
</div>

Requires: tw.min.css

// Error state: shake dots and show message
function showError(message) {
  const dots = document.querySelectorAll('.pinpad-dot');
  dots.forEach(dot => {
    dot.classList.remove('pinpad-dot-filled');
    dot.classList.add('pinpad-dot-error');
  });
  document.querySelector('.pinpad-error').textContent = message;
  setTimeout(() => {
    dots.forEach(d => d.classList.remove('pinpad-dot-error'));
    pin = '';
  }, 1000);
}

// Success state
function showSuccess() {
  document.querySelectorAll('.pinpad-dot').forEach(d => {
    d.classList.remove('pinpad-dot-filled');
    d.classList.add('pinpad-dot-success');
  });
  document.querySelectorAll('.pinpad-key').forEach(k => k.disabled = true);
}

Fullscreen PIN Screen

Preview

Employee Login

Enter your 4-digit PIN

Try PIN: 1234

<!-- In the preview, shown as contained. In production use position: fixed -->
<div class="pinpad-screen" data-state="open" style="position: relative; min-height: 560px;">
  <div class="pinpad">
    <div class="pinpad-avatar">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
    </div>
    <h2 class="pinpad-title">Employee Login</h2>
    <p class="pinpad-label">Enter your 4-digit PIN</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
    </div>
    <div class="pinpad-grid">
      <button class="pinpad-key">1</button>
      <button class="pinpad-key">2</button>
      <button class="pinpad-key">3</button>
      <button class="pinpad-key">4</button>
      <button class="pinpad-key">5</button>
      <button class="pinpad-key">6</button>
      <button class="pinpad-key">7</button>
      <button class="pinpad-key">8</button>
      <button class="pinpad-key">9</button>
      <button class="pinpad-key pinpad-key-hidden"></button>
      <button class="pinpad-key">0</button>
      <button class="pinpad-key">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
    <p class="pinpad-hint">Try PIN: 1234</p>
  </div>
</div>

Requires: ux.min.css

<!-- pinpad-screen is fixed fullscreen by default. Use data-state to show/hide -->
<div class="relative flex items-center justify-center bg-base-100 min-h-[560px]">
  <div class="flex flex-col items-center gap-6 p-6">
    <div class="w-16 h-16 rounded-full overflow-hidden flex items-center justify-center bg-base-200">
      <svg class="w-8 h-8 text-base-content/50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
    </div>
    <h2 class="text-xl font-semibold m-0">Employee Login</h2>
    <p class="text-sm text-base-content/60 m-0">Enter your 4-digit PIN</p>
    <div class="flex gap-4">
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-base-300"></div>
    </div>
    <div class="grid grid-cols-3 gap-3 max-w-70">
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">1</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">2</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">3</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">4</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">5</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">6</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">7</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">8</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">9</button>
      <div class="invisible"></div>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">0</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">&larr;</button>
    </div>
    <p class="text-xs text-base-content/40 m-0">Try PIN: 1234</p>
  </div>
</div>

Requires: tw.min.css

// Fullscreen PIN screen with validation
const screen = document.getElementById('pin-screen');
let pin = '';

screen.querySelectorAll('.pinpad-key').forEach(key => {
  key.addEventListener('click', () => {
    if (key.querySelector('svg')) pin = pin.slice(0, -1);
    else if (pin.length < 4) pin += key.textContent.trim();

    screen.querySelectorAll('.pinpad-dot').forEach((dot, i) => {
      dot.classList.toggle('pinpad-dot-filled', i < pin.length);
    });

    if (pin.length === 4) {
      if (pin === '1234') {
        // Success — show green dots then close
        screen.querySelectorAll('.pinpad-dot').forEach(d => {
          d.classList.remove('pinpad-dot-filled');
          d.classList.add('pinpad-dot-success');
        });
        setTimeout(() => screen.dataset.state = 'closed', 600);
      } else {
        // Error — shake and reset
        screen.querySelectorAll('.pinpad-dot').forEach(d => {
          d.classList.remove('pinpad-dot-filled');
          d.classList.add('pinpad-dot-error');
        });
        setTimeout(() => {
          screen.querySelectorAll('.pinpad-dot').forEach(d => {
            d.className = 'pinpad-dot';
          });
          pin = '';
        }, 800);
      }
    }
  });
});

Sizes

Preview

Small

Large (6 digits)

<div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: flex-start;">
  <!-- Small -->
  <div class="pinpad pinpad-sm">
    <p class="pinpad-label">Small</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
    </div>
    <div class="pinpad-grid">
      <button class="pinpad-key">1</button>
      <button class="pinpad-key">2</button>
      <button class="pinpad-key">3</button>
      <button class="pinpad-key">4</button>
      <button class="pinpad-key">5</button>
      <button class="pinpad-key">6</button>
      <button class="pinpad-key">7</button>
      <button class="pinpad-key">8</button>
      <button class="pinpad-key">9</button>
      <button class="pinpad-key pinpad-key-hidden"></button>
      <button class="pinpad-key">0</button>
      <button class="pinpad-key">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
  </div>

  <!-- Large (6-digit) -->
  <div class="pinpad pinpad-lg">
    <p class="pinpad-label">Large (6 digits)</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
    </div>
    <div class="pinpad-grid">
      <button class="pinpad-key">1</button>
      <button class="pinpad-key">2</button>
      <button class="pinpad-key">3</button>
      <button class="pinpad-key">4</button>
      <button class="pinpad-key">5</button>
      <button class="pinpad-key">6</button>
      <button class="pinpad-key">7</button>
      <button class="pinpad-key">8</button>
      <button class="pinpad-key">9</button>
      <button class="pinpad-key pinpad-key-hidden"></button>
      <button class="pinpad-key">0</button>
      <button class="pinpad-key">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: flex-start;">
  <!-- Small -->
  <div class="flex flex-col items-center gap-4 p-4">
    <p class="text-sm text-base-content/60 m-0">Small</p>
    <div class="flex gap-4">
      <div class="w-3.5 h-3.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-3.5 h-3.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-3.5 h-3.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-3.5 h-3.5 rounded-full bg-transparent border-2 border-base-300"></div>
    </div>
    <div class="grid grid-cols-3 gap-2 max-w-55">
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">1</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">2</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">3</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">4</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">5</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">6</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">7</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">8</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">9</button>
      <div class="invisible"></div>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">0</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-14 h-14 text-xl font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">&larr;</button>
    </div>
  </div>

  <!-- Large -->
  <div class="flex flex-col items-center gap-8 p-8">
    <p class="text-sm text-base-content/60 m-0">Large (6 digits)</p>
    <div class="flex gap-4">
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
      <div class="w-5.5 h-5.5 rounded-full bg-transparent border-2 border-base-300"></div>
    </div>
    <div class="grid grid-cols-3 gap-4 max-w-80">
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">1</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">2</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">3</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">4</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">5</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">6</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">7</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">8</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">9</button>
      <div class="invisible"></div>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">0</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-21 h-21 text-[1.75rem] font-medium hover:bg-base-content/5 active:scale-92 cursor-pointer">&larr;</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Size is CSS-only via pinpad-sm / pinpad-lg classes.
// 6-digit PIN: just add more dots and change the length check
const PIN_LENGTH = 6;
if (pin.length === PIN_LENGTH) { verifyPin(pin); }

Glass (Dark Background)

Preview

Enter PIN

4 digits

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: var(--radius-box, 0.75rem); min-height: 500px; display: flex; align-items: center; justify-content: center;">
  <div class="pinpad pinpad-screen-dark">
    <p class="pinpad-label">Enter PIN</p>
    <div class="pinpad-dots">
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
      <div class="pinpad-dot"></div>
    </div>
    <div class="pinpad-grid">
      <button class="pinpad-key">1</button>
      <button class="pinpad-key">2</button>
      <button class="pinpad-key">3</button>
      <button class="pinpad-key">4</button>
      <button class="pinpad-key">5</button>
      <button class="pinpad-key">6</button>
      <button class="pinpad-key">7</button>
      <button class="pinpad-key">8</button>
      <button class="pinpad-key">9</button>
      <button class="pinpad-key pinpad-key-hidden"></button>
      <button class="pinpad-key">0</button>
      <button class="pinpad-key">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l-7-7 7-7M19 12H5"/></svg>
      </button>
    </div>
    <p class="pinpad-hint">4 digits</p>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; border-radius: 0.75rem; min-height: 500px; display: flex; align-items: center; justify-content: center;">
  <div class="flex flex-col items-center gap-6 p-6 text-white">
    <p class="text-sm text-white/60 m-0">Enter PIN</p>
    <div class="flex gap-4">
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-white/30"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-white/30"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-white/30"></div>
      <div class="w-4.5 h-4.5 rounded-full bg-transparent border-2 border-white/30"></div>
    </div>
    <div class="grid grid-cols-3 gap-3 max-w-70">
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">1</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">2</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">3</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">4</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">5</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">6</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">7</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">8</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">9</button>
      <div class="invisible"></div>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">0</button>
      <button class="flex items-center justify-center bg-transparent border-none rounded-full w-18 h-18 text-2xl font-medium text-white hover:bg-white/8 active:scale-92 cursor-pointer">&larr;</button>
    </div>
    <p class="text-xs text-white/40 m-0">4 digits</p>
  </div>
</div>

Requires: tw.min.css

// Glass/dark variant is CSS-only via pinpad-screen-dark class.
// For fullscreen glass: combine pinpad-screen + glass + pinpad-screen-dark
// <div class="pinpad-screen glass pinpad-screen-dark" style="background: linear-gradient(...);">