Ionic Numeric Keyboard

Ionic Numeric Keyboard

Highly customizable numeric keyboard for your app


Iclic Labs

Iclic Labs

Member since 2014


iOS, Android  
6 years ago
4 years ago
keyboard, number, numeric,

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by


Ionic Numeric Keyboard is a gorgeous component allowing you to simulate a numeric keyboard without having to deal with a native (and painful) keyboard. The numeric keyboard is an easy-to-use directive similar to an ion-footer. You can easily customize the style or the content of each keys.

Test Before You Buy

You can test the app using Ionic View and enter the app id 4a734ddb.


  1. Works with iOS, Android and Windows Phone.
  2. Works great for passcode, SMS code validation, phone numbers, any numeric input in forms
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. The keyboard is highly customizable with just a few CSS lines.
  6. You can show/hide the keyboard easily.
  7. Compatible with your existing code.
  8. This component contains an easy to use directive. It comes with all 7 examples
  9. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.


  1. Copy the lib/ion-numeric-keyboard/ion-numeric-keyboard.js into your lib folder
  2. Update your index.html to include the lib/ion-numeric-keyboard/ion-numeric-keyboard.js file
  3. Update the app.js file and add dbaq.ionNumericKeyboard to the list of modules, i.e. angular.module('starter', ['ionic', 'dbaq.ionNumericKeyboard'])

That's all!


  1. in your view, add after the : . The options attribute is an object containing the function called when the user presses a key, the left control content (optional) and the right control content (optional).

That's all. Here is an example of a view:



... your content goes here ...


Here is an example for your controller:

``` module.controller('PasscodeExampleController', ['$scope', function($scope) {

$scope.number = '';

$scope.options = { visible: true, // whether or not showing the keyboard, set to true to display the keyboard when entering the view hideOnOutsideClick: false, // close the keyboard when clicking outside leftControl: '.', rightControl: '', onKeyPress: function(value, source) { if (source === 'LEFTCONTROL') { if ($scope.number.indexOf('.') === -1) { $scope.number += value; } } else if (source === 'RIGHTCONTROL') { $scope.number = $scope.number.substr(0, $scope.number.length - 1); } else if (source === 'NUMERIC_KEY') { $scope.number += value; } } } }]); ```

leftControl and rightControl properties are optionals. If there are not defined, the button will be disable and not clickable.

This component is structured, easy to customize and integrate into your Ionic app, BUT feel free to email me if you need any help.


Customizing this component is really easy. Here is how to change the color:

``` /* style for each key*/ .ion-numeric-keyboard.white-keyboard .key { background-color: #fff; color: #5995DC; border-color: #eee; }

/* style when a key is pressed */ .ion-numeric-keyboard.white-keyboard .key.activated { box-shadow: inset 0 1px 4px rgba(0, 0, 0, .1); background-color: rgba(230, 230, 230, 0.5); }

/* style for control keys, you can also use .left-control-key and .right-control-key */ .ion-numeric-keyboard.white-keyboard .key.control-key { background-color: #fafafa; }

/* style for the top bar with the done button */ .ion-numeric-keyboard.white-keyboard .ion-numeric-keyboard-top-bar { background-color: #fafafa; border-top: 1px #eee solid; border-bottom: 1px #eee solid; } .ion-numeric-keyboard.white-keyboard .ion-numeric-keyboard-top-bar button { color: #5995DC; } ```

You can apply a class to the ion-numeric-keyboard directive.

The style.css file comes with different example:

  • how to animate the keyboard
  • how to have a flat keyboard (no borders)
  • how to customize the theme

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at