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 currency mask: Displays and edits the amount.
• Keypad Grid: A group of digit and function buttons for entering the amount.

The grid follows the Figma Touch_Keypad component. QKeypad also includes the amount field, label, currency behavior, and validation.

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 ​

The default horizontal layout has 5 columns and 3 rows: 1, 2, 3, 000, C / 4, 5, 6, 00, - / 7, 8, 9, 0, ,. The minus key stays disabled unless enableNegative is enabled.

Vertical Layout ​

Use layout="vertical" to display the Figma 3-column by 4-row grid: 1, 2, 3 / 4, 5, 6 / 7, 8, 9 / 0, 00, ,.

Custom Label ​

Custom Digits and Functionality Buttons ​

Disable validation rules ​

Use a different starting amount instead of :amountTotal ​

Custom sizing ​

The default Figma keys are 56 × 56 px with a 4 px gap. Override the CSS custom properties when a consumer needs a different size.

Theme-aware button states ​

Digit hover and pressed states use the semantic --q-keypad-digit-hover-bg token, so the fill adapts to Lighthouse light and dark themes. Functionality keys continue using their semantic body-surface colors.

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 ​

The horizontal Figma layout includes a "-" button. It is disabled by default to keep amount entry positive; set enableNegative to activate it. The button 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; digit keys, the currency radix key, Backspace, and C are also handled from the physical keyboard
• The comma key moves the caret to the currency radix position; in caret-disabled entry mode, digits continue to represent minor-unit entry
• 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