Register

Numeric keypad

The register’s keypads: an amount, and a PIN

Amount

Digits come in from the right, like a card terminal; a quick key sets its amount.

Cash received
$20.00
Show the code
<div class="stack w-100" data-density="counter" data-pad-box style="max-width: 360px">
<div class="amount">
<div class="lbl">
<span>Cash received</span>
</div>
<div class="val" role="status">
<span class="cur">$</span>
<span data-pad-out>20.00</span>
</div>
</div>
<div class="keypad" data-pad data-value="20.00">
<button class="key" type="button" data-key="1">1</button>
<button class="key" type="button" data-key="2">2</button>
<button class="key" type="button" data-key="3">3</button>
<button class="key cash" type="button" data-set="10.00">$10</button>
<button class="key" type="button" data-key="4">4</button>
<button class="key" type="button" data-key="5">5</button>
<button class="key" type="button" data-key="6">6</button>
<button class="key cash" type="button" data-set="20.00">$20</button>
<button class="key" type="button" data-key="7">7</button>
<button class="key" type="button" data-key="8">8</button>
<button class="key" type="button" data-key="9">9</button>
<button class="key cash" type="button" data-set="50.00">$50</button>
<button class="key fn" type="button" data-key="clear" aria-label="Clear">C</button>
<button class="key" type="button" data-key="0">0</button>
<button class="key" type="button" data-key="00">00</button>
<button class="key fn" type="button" data-key="back" aria-label="Delete">
<i class="ti ti-backspace">
</i>
</button>
</div>
</div>

PIN

Dots fill as digits come in; the count is announced.

Manager’s PIN

Show the code
<div class="stack w-100" data-density="counter" data-pad-box style="max-width: 320px">
<div class="pin">
<p>Manager’s PIN</p>
<div class="dots" aria-hidden="true">
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
</div>
<span class="sr-only" role="status" data-pin-status>
</span>
</div>
<div class="keypad pad-3" data-pad="pin">
<button class="key" type="button" data-key="1">1</button>
<button class="key" type="button" data-key="2">2</button>
<button class="key" type="button" data-key="3">3</button>
<button class="key" type="button" data-key="4">4</button>
<button class="key" type="button" data-key="5">5</button>
<button class="key" type="button" data-key="6">6</button>
<button class="key" type="button" data-key="7">7</button>
<button class="key" type="button" data-key="8">8</button>
<button class="key" type="button" data-key="9">9</button>
<button class="key fn" type="button" data-key="clear" aria-label="Clear">C</button>
<button class="key" type="button" data-key="0">0</button>
<button class="key fn" type="button" data-key="back" aria-label="Delete">
<i class="ti ti-backspace">
</i>
</button>
</div>
</div>