Widget: Universal Keypad

Tags: #<Tag:0x00007f616e1d0cc8> #<Tag:0x00007f616e1d0c00> #<Tag:0x00007f616e1d0b38>

Universal Keypad for HABPanel

Keypad.widget.json (10.6 KB)

A universal keypad for HABPanel. Use this for your temperature IoT’s, as a calculator, or just to send a number to an item!


  1. Responsive
  2. Stylable
  3. Customizable
  4. Single receiving item
  5. Controller-less ( no code behind! )
  6. Awesome!







You can style the keypad based on class names
Find the class names through the git repo


Settings are self-explanatory so I will only provide comments on the ones that are not straightforward.

  • Mask Character - this will mask the output box
  • Clear on Submit - if this is checked, the model is also cleared. This will NOT clear your item, only the UI client side.
  • Output Box Clickable - if enabled, you will be able to click on the box just like an input box.
  • Units - Some of the settings require UNITs so do not forget to include them.
  • Background - You can set using any CSS-valid value. Examples:
    • url(’//path/to/an/online/image’)
    • inherit
    • black
    • transparent
    • #FFFFFF
    • rgb(0,0,0)

To Do

  1. Immediately send command to item on click. (this will not have the output box)

< reserved >

with every click on a number my browser ask me for saving password ?

its firefox

Fixed. Updated the link on OP


I would like to use this widget but I have some layout issues (see picture). I have the same result on latest versions of Firefox, Chrome or Safari on Mac.

Any idea on how to fix that ?

All settings are default, except the checkbox to avoid putting it in a container.


I’ve the same problem as @tarag.
Do you have a solution for that?

Can anyone provide some code that when pressing an existing switch widget it would then pop this keypad up as a prompt to enter a code and then on OK it closes the pop up?

It looks like this if you leave “Spacing” empty. As soon as you fill this field - even if it is zero - it shows the keypad layout with three rows.


I installed this widget and it works great. Thanks for the hard work. There is a problem: when the page is viewed in a mobile device, in portrait mode, the rendering is not correct. Can anyone tell me how to fix this?

In landscape mode:

In portrait mode:



This is great and just what I was looking for.

Is there a way I can remove the animation when pressing the numbers? This is quite laggy on my fire 7 tablets.


It’s all in the css

Hi There.
What would be really useful is an option to clear the “Receiving Item” after a certain interval to prevent the PIN number lying there unused.