---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-keypad
widgetname: Keypad
description: "This documentation explains how to use a numeric keypad widget for user input within a UI page"
---

# Keypad

![Key Pad Icon][keyPadIcon]

## Overview

The Keypad widget provides an onscreen numeric keyboard to input values in an UI Page. An example of an UI Page using a Keypad widget is shown below.

![Keypadexample][keypadExample]

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![KeypadGeneral][keypadGeneral]

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![keypadStyle](images/keypad_style.png)

2. In the **Setup** tab provide execution related properties such as:

    * **Number Type** - The type, choose between Integer, Long, Decimal, or Float8.
    * **Minimum Value** - Set the minimum acceptable input value. If left blank, the system will use the default minimum value configured.
    * **Maximum Value** - Set the maximum value acceptable as input. If left blank, the system will use the default maximum value configured.
    * **Show OK Button** - Set to `true` as default, it indicates whether to display the OK button.
    * **Show Errors** - Set to `true` as default, it indicates whether to display validation errors.
    * **Is Required** - Set to `true` as default, it indicates whether the value is required.
    * **Is Read-Only** - Set to `false` as default, it indicates whether the value is read-only.

    ![KeypadSetup][keypadSetup]

3. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![KeypadLinks][keypadLinks]

4. Select **Save and Close** to complete the widget configuration.

## Real Use Case

To help you take full advantage of the Keypad widget, the following scenario demonstrates how to connect a Keypad widget with a [[user-guide-uipage-widgets-form]] widget.

1. Configure the Fields tab in the Form widget settings.

    ![Screenshot showing a keypad form with sample data and filename hint, illustrating the step to configure the Fields tab in the Form widget settings.](images/use_case_keypad_form.png)

2. Configure the Links between the Keypad and the Form widget as shown below.

    ![KeypadLinks][keypadLinks]

3. The final result of this simple scenario is shown below.

    === "UI Page"

        ![Screenshot showing a numeric keypad with digits 7, 8, and 9 displayed along with a currency symbol "¢" and the letter "Bo".](images/use_case_keypad_result.png)

    === "Links Diagram"

        ![Screenshot showing the final result of a simple scenario with two highlighted elements.](images/use_case_keypad_result02.png) 

[keyPadIcon]: images/uiKeypad.png
[keypadExample]: images/uiPageExample1.png
[keypadGeneral]: images/keypad_general.png
[keypadSetup]: images/keypad_setup.png
[keypadLinks]: images/keypad_links.png