Pinpad

Teclado numérico 3×4 para desbloqueo POS y entrada de PIN.

Sobre estas demos

Las primeras dos variantes son markup estático para mostrar layout; las teclas dan feedback visual (:hover · :active) pero no escriben en ningún display. La variante Datastar al final es la única que actualiza un display de PIN al pulsar.

Default

<div class="pinpad">
  <button type="button" class="pinpad-key" data-key="1">1</button>
  <button type="button" class="pinpad-key" data-key="2">2</button>
  <button type="button" class="pinpad-key" data-key="3">3</button>
  <button type="button" class="pinpad-key" data-key="4">4</button>
  <button type="button" class="pinpad-key" data-key="5">5</button>
  <button type="button" class="pinpad-key" data-key="6">6</button>
  <button type="button" class="pinpad-key" data-key="7">7</button>
  <button type="button" class="pinpad-key" data-key="8">8</button>
  <button type="button" class="pinpad-key" data-key="9">9</button>
  <button type="button" class="pinpad-key pinpad-key--action" data-key="back" aria-label="Borrar">⌫</button>
  <button type="button" class="pinpad-key" data-key="0">0</button>
  <button type="button" class="pinpad-key pinpad-key--action" data-key="enter" aria-label="Confirmar">↵</button>
</div>

{% from "pinpad.jinja" import pinpad %}
{{ pinpad() }}

<Pinpad />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Etiquetas custom — confirmación de pago

<div class="pinpad">
  <button type="button" class="pinpad-key" data-key="1">1</button>
  <button type="button" class="pinpad-key" data-key="2">2</button>
  <button type="button" class="pinpad-key" data-key="3">3</button>
  <button type="button" class="pinpad-key" data-key="4">4</button>
  <button type="button" class="pinpad-key" data-key="5">5</button>
  <button type="button" class="pinpad-key" data-key="6">6</button>
  <button type="button" class="pinpad-key" data-key="7">7</button>
  <button type="button" class="pinpad-key" data-key="8">8</button>
  <button type="button" class="pinpad-key" data-key="9">9</button>
  <button type="button" class="pinpad-key pinpad-key--action" data-key="back" aria-label="Borrar">C</button>
  <button type="button" class="pinpad-key" data-key="0">0</button>
  <button type="button" class="pinpad-key pinpad-key--action" data-key="enter" aria-label="Confirmar">Cobrar</button>
</div>

{% from "pinpad.jinja" import pinpad %}
{{ pinpad(back_label="C", enter_label="Cobrar") }}

<Pinpad back_label="C" enter_label="Cobrar" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar — entrada de PIN reactiva

PIN: ______

<div data-signals="{ pin: '' }" style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">
  <div class="pinpad">
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '1'">1</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '2'">2</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '3'">3</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '4'">4</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '5'">5</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '6'">6</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '7'">7</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '8'">8</button>
    
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '9'">9</button>
    
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = $pin.slice(0, -1)">⌫</button>
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '0'">0</button>
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = ''">↵</button>
  </div>
  <div>
    PIN: <strong style="font-family:var(--font-mono);font-size:18px;letter-spacing:4px;" data-text="$pin.replace(/./g, '•').padEnd(6, '_')">______</strong>
  </div>
</div>

<div data-signals="{ pin: '' }" style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">
  <div class="pinpad">
    {% for n in [1,2,3,4,5,6,7,8,9] %}
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '{{ n }}'">{{ n }}</button>
    {% endfor %}
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = $pin.slice(0, -1)">⌫</button>
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '0'">0</button>
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = ''">↵</button>
  </div>
  <div>
    PIN: <strong style="font-family:var(--font-mono);font-size:18px;letter-spacing:4px;" data-text="$pin.replace(/./g, '•').padEnd(6, '_')">______</strong>
  </div>
</div>

<div data-signals="{ pin: '' }" style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">
  <div class="pinpad">
    {% for n in [1,2,3,4,5,6,7,8,9] %}
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '{{ n }}'">{{ n }}</button>
    {% endfor %}
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = $pin.slice(0, -1)">⌫</button>
    <button type="button" class="pinpad-key" data-on:click="if($pin.length<6) $pin += '0'">0</button>
    <button type="button" class="pinpad-key pinpad-key--action" data-on:click="$pin = ''">↵</button>
  </div>
  <div>
    PIN: <strong style="font-family:var(--font-mono);font-size:18px;letter-spacing:4px;" data-text="$pin.replace(/./g, '•').padEnd(6, '_')">______</strong>
  </div>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`back_label`	str	"⌫"	Texto del botón de borrado.
`enter_label`	str	"↵"	Texto del botón de confirmación.
`attrs`	dict	None	Atributos extra.