A numeric keypad for entering monetary amounts. Provides a grid of digit and action buttons that update a bound amount value; supports both touch and physical keyboard input.

When to Use ​

• In point-of-sale or payment flows where users need to enter an amount using a numeric keypad
• When precise decimal input via touch is required (e.g. cash register, kiosk)
• When physical keyboard and touch inputs need to be handled identically

When Not to Use ​

• For general numeric inputs without a monetary context — use QFormFieldInput with a type="number" mask
• When the user only needs to confirm or increment a quantity — use QFormFieldInputNumber
• In form contexts where a keyboard input field alone is sufficient

Component Anatomy ​

A Lighthouse Keypad typically consists of:

• QFormFieldInput component with optimized :mask='currency': Used to collect custom starting values and stamp amount inserted.
• Keypad Grid: A group of buttons used for add digit to amount, cancel total amount inserted or other special features.

Features and Behaviour ​

It is possible to insert values by touch or by physical keyboard with the possibility (by default) to move the caret between digits.

By default, clicking "C" button or pressing "C" key in physical keyboard the custom value it would be reset to default value.

By default, pressing "Backspace" or "Cancel" key in physical keyboard the component remove the last digit on the right or on the left of caret and move the remaining digits to have always two decimals (or the number set on currency configuration).

Basic Usage ​

Vertical Layout ​

Use layout="vertical" to display the keypad with 3 columns and 4 rows (phone-style layout).

Custom Label ​

Custom Digits and Functionality Buttons ​

Disable validation rules ​

Use a different starting amount instead of :amountTotal ​

Custom sizing ​

Caret Interaction false ​

When you insert a digit, it would be inserted always as the last digit on the right. Clicking or inserting another digit, this would be take the last position on the right moving the previous digits on the left.

Invoke Reset Method ​

Clear Resets To Zero ​

By default, clicking "C" (or pressing the "C" key) restores the starting value. With clearResetsToZero enabled, "C" clears the amount to zero instead — even from the initial prefill. Use it when the keypad edits a free amount and the original value is restored elsewhere (e.g. a dedicated "Restore" action).

Enable Negative Sign ​

By default the keypad accepts positive amounts only. With enableNegative, a "-" button (added to keypadValues) forces the current amount to negative (one-way: pressing it again keeps it negative). To go back to positive, clear with "C", use Backspace, or re-enter the amount. The "-" also works from the physical keyboard.

Props ​

Events ​

Exposed Methods ​

CSS Custom Properties ​

Accessibility ​

• All keypad buttons are rendered as <button> elements and are keyboard-accessible with Tab
• Physical keyboard input mirrors the on-screen keys — digit keys add digits, Backspace removes the last digit, and C resets the value
• When disabled, the keypad and all buttons are not focusable via keyboard
• Provide a visible label for the amount field via amountLabel so screen readers can identify the input purpose