A 0–9 keypad with a delete key, for PIN and passcode entry. It emits a digit or a delete event; you hold the value. Can optionally capture physical keyboard input.
Examples
PIN entry
You hold the value; the numpad emits digit and delete. can-delete enables the backspace key, and capture-keyboard lets the physical number keys and Backspace drive it too — try typing.
····
<div class="mx-auto w-72">
<p class="mb-3 text-center font-mono text-2xl tracking-[0.4em]">{{ state.pin || '····' }}</p>
<UiNumpad
capture-keyboard
:can-delete="!!state.pin"
@digit="state.pin = (state.pin || '') + $event"
@delete="state.pin = (state.pin || '').slice(0, -1)"
/>
</div>Bottom-left slot
Fill the empty cell beside 0 with your own control, such as a biometric unlock.
<div class="mx-auto w-72">
<UiNumpad
:can-delete="!!state.pin2"
@digit="state.pin2 = (state.pin2 || '') + $event"
@delete="state.pin2 = (state.pin2 || '').slice(0, -1)"
>
<template #bottom-left>
<button type="button" class="flex h-16 w-full items-center justify-center rounded-2xl text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800">
<UiIcon name="mdi:fingerprint" class="h-6 w-6" />
</button>
</template>
</UiNumpad>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Disables all keys. |
| canDelete | boolean | false | Enables the delete key. |
| captureKeyboard | boolean | false | Also handle physical keyboard input. |
Events
| Event | Payload | Description |
|---|---|---|
digit | string | Emitted with the pressed digit. |
delete | void | Emitted when the delete key is pressed. |
Slots
| Slot | Description |
|---|---|
bottom-left | Content for the otherwise-empty bottom-left cell (e.g. a biometrics button). |