Numpad

Numeric keypad for POS, PIN entry, quick amounts, calculator layout, and standalone PIN pad.

Basic Numpad

Preview

€ 42.50

<div class="numpad">
  <div class="numpad-display">
    <span class="numpad-display-currency">€</span>
    <span class="numpad-display-value">42.50</span>
  </div>
  <div class="numpad-grid">
    <button class="numpad-key">7</button>
    <button class="numpad-key">8</button>
    <button class="numpad-key">9</button>
    <button class="numpad-key">4</button>
    <button class="numpad-key">5</button>
    <button class="numpad-key">6</button>
    <button class="numpad-key">1</button>
    <button class="numpad-key">2</button>
    <button class="numpad-key">3</button>
    <button class="numpad-key numpad-key-action">C</button>
    <button class="numpad-key">0</button>
    <button class="numpad-key numpad-key-primary">OK</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4 bg-base-100 rounded-box max-w-fit">
  <div class="flex items-center justify-end overflow-hidden truncate whitespace-nowrap min-h-14 px-6 py-4 bg-base-200 border border-base-300 rounded-box font-mono text-2xl font-semibold">
    <span class="text-[0.75em] text-base-content/60 mr-1">€</span>
    <span class="tabular-nums">42.50</span>
  </div>
  <div class="grid grid-cols-3 gap-2">
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">7</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">8</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">9</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">4</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">5</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">6</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">1</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">2</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">3</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-200 border border-base-300 rounded-box text-2xl font-medium text-base-content/60 hover:bg-base-300 active:scale-95">C</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200 active:scale-95">0</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 p-2 bg-primary border-primary rounded-box text-2xl font-medium text-primary-content hover:brightness-90 active:scale-95">OK</button>
  </div>
</div>

Requires: tw.min.css

// Handle key presses
document.querySelectorAll('.numpad-key').forEach(key => {
  key.addEventListener('click', () => {
    const val = key.textContent;
    if (val === 'C') { /* clear display */ }
    else if (val === 'OK') { /* submit value */ }
    else { /* append digit to display */ }
  });
});

With Quick Amounts

Preview

Importe € 0.00

<div class="numpad">
  <div class="numpad-display numpad-display-lg">
    <span class="numpad-display-label">Importe</span>
    <span class="numpad-display-currency">€</span>
    <span class="numpad-display-value">0.00</span>
  </div>
  <div class="numpad-quick-amounts">
    <button class="numpad-quick-btn">€5</button>
    <button class="numpad-quick-btn">€10</button>
    <button class="numpad-quick-btn">€20</button>
    <button class="numpad-quick-btn">€50</button>
    <button class="numpad-quick-btn">€100</button>
  </div>
  <div class="numpad-grid">
    <button class="numpad-key">7</button>
    <button class="numpad-key">8</button>
    <button class="numpad-key">9</button>
    <button class="numpad-key">4</button>
    <button class="numpad-key">5</button>
    <button class="numpad-key">6</button>
    <button class="numpad-key">1</button>
    <button class="numpad-key">2</button>
    <button class="numpad-key">3</button>
    <button class="numpad-key numpad-key-danger">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 14L15 8M9 8l6 6"/></svg>
    </button>
    <button class="numpad-key">0</button>
    <button class="numpad-key numpad-key-success">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4 bg-base-100 rounded-box max-w-fit">
  <div class="flex items-center justify-end overflow-hidden truncate whitespace-nowrap min-h-18 px-6 py-4 bg-base-200 border border-base-300 rounded-box font-mono text-2xl font-semibold">
    <span class="text-sm font-normal mr-auto text-base-content/60">Importe</span>
    <span class="text-[0.75em] text-base-content/60 mr-1">€</span>
    <span class="tabular-nums">0.00</span>
  </div>
  <div class="flex flex-wrap gap-1">
    <button class="flex-1 text-sm font-medium min-w-15 px-4 py-2 bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">€5</button>
    <button class="flex-1 text-sm font-medium min-w-15 px-4 py-2 bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">€10</button>
    <button class="flex-1 text-sm font-medium min-w-15 px-4 py-2 bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">€20</button>
    <button class="flex-1 text-sm font-medium min-w-15 px-4 py-2 bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">€50</button>
    <button class="flex-1 text-sm font-medium min-w-15 px-4 py-2 bg-base-200 border border-base-300 rounded-field hover:bg-base-300 active:scale-97">€100</button>
  </div>
  <div class="grid grid-cols-3 gap-2">
    <!-- number keys 7-9, 4-6, 1-3, cancel/0/confirm -->
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">7</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">8</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">9</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">4</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">5</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">6</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">1</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">2</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">3</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-transparent border border-error rounded-box text-error hover:bg-error/10">✕</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-base-100 border border-base-300 rounded-box text-2xl font-medium hover:bg-base-200">0</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-success border-success rounded-box text-white hover:brightness-90">✓</button>
  </div>
</div>

Requires: tw.min.css

// Quick amount buttons set value directly
document.querySelectorAll('.numpad-quick-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const amount = btn.textContent.replace('€', '');
    display.textContent = parseFloat(amount).toFixed(2);
  });
});

Sizes

Preview

<!-- Small -->
<div class="numpad numpad-sm numpad-compact">
  <div class="numpad-display numpad-display-sm">
    <span class="numpad-display-value">0</span>
  </div>
  <div class="numpad-grid">
    <button class="numpad-key">7</button>
    <button class="numpad-key">8</button>
    <button class="numpad-key">9</button>
    <button class="numpad-key">4</button>
    <button class="numpad-key">5</button>
    <button class="numpad-key">6</button>
    <button class="numpad-key">1</button>
    <button class="numpad-key">2</button>
    <button class="numpad-key">3</button>
    <button class="numpad-key numpad-key-action">C</button>
    <button class="numpad-key">0</button>
    <button class="numpad-key numpad-key-primary">OK</button>
  </div>
</div>

<!-- Large -->
<div class="numpad numpad-lg">
  <div class="numpad-display numpad-display-lg">
    <span class="numpad-display-value">0</span>
  </div>
  <div class="numpad-grid">
    <button class="numpad-key">7</button>
    <button class="numpad-key">8</button>
    <button class="numpad-key">9</button>
    <button class="numpad-key">4</button>
    <button class="numpad-key">5</button>
    <button class="numpad-key">6</button>
    <button class="numpad-key">1</button>
    <button class="numpad-key">2</button>
    <button class="numpad-key">3</button>
    <button class="numpad-key numpad-key-action">C</button>
    <button class="numpad-key">0</button>
    <button class="numpad-key numpad-key-primary">OK</button>
  </div>
</div>

Requires: ux.min.css

<!-- Small numpad -->
<div class="flex flex-col gap-2 p-3 bg-base-100 rounded-box max-w-fit">
  <div class="flex items-center justify-end min-h-10 px-4 py-2 bg-base-200 border border-base-300 rounded-box font-mono text-lg font-semibold tabular-nums">0</div>
  <div class="grid grid-cols-3 gap-1">
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">7</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">8</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">9</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">4</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">5</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">6</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">1</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">2</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">3</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-200 border border-base-300 rounded-box text-lg font-medium hover:bg-base-300 active:scale-95">C</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-base-100 border border-base-300 rounded-box text-lg font-medium hover:bg-base-200 active:scale-95">0</button>
    <button class="flex items-center justify-center min-w-12 min-h-12 bg-primary border-primary rounded-box text-lg font-medium text-primary-content hover:brightness-90 active:scale-95">OK</button>
  </div>
</div>

Requires: tw.min.css

// No JS needed — size is controlled by CSS classes

Glass

Preview

€ 25.00

<div class="numpad glass" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem;">
  <div class="numpad-display">
    <span class="numpad-display-currency">€</span>
    <span class="numpad-display-value">25.00</span>
  </div>
  <div class="numpad-grid">
    <button class="numpad-key">7</button>
    <button class="numpad-key">8</button>
    <button class="numpad-key">9</button>
    <button class="numpad-key">4</button>
    <button class="numpad-key">5</button>
    <button class="numpad-key">6</button>
    <button class="numpad-key">1</button>
    <button class="numpad-key">2</button>
    <button class="numpad-key">3</button>
    <button class="numpad-key numpad-key-action">C</button>
    <button class="numpad-key">0</button>
    <button class="numpad-key numpad-key-primary">OK</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-6 rounded-box glass text-white" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="flex items-center justify-end min-h-14 px-6 py-4 rounded-box font-mono text-2xl font-semibold glass">
    <span class="text-[0.75em] opacity-60 mr-1">€</span>
    <span class="tabular-nums">25.00</span>
  </div>
  <div class="grid grid-cols-3 gap-2">
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">7</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">8</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">9</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">4</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">5</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">6</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">1</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">2</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">3</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white/60 hover:brightness-110 active:scale-95 border-none cursor-pointer">C</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 glass rounded-box text-2xl font-medium text-white hover:brightness-110 active:scale-95 border-none cursor-pointer">0</button>
    <button class="flex items-center justify-center min-w-16 min-h-16 bg-white/30 rounded-box text-2xl font-bold text-white hover:bg-white/40 active:scale-95 border-none cursor-pointer">OK</button>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant