Q&A / Use-cases

How to give a different base class to my keyboard / Use multiple keyboard instances

As you may have seen on the code samples, this is the default setup that simple-keyboard uses:

<div class="simple-keyboard"></div>
let keyboard = new Keyboard({
  // Add options here


You can however change this by setting up simple-keyboard like so:

<div class="myFavouriteClass"></div>
let keyboard = new Keyboard(".myFavouriteClass", {
  // If you want the default CSS styles
  theme: "simple-keyboard hg-theme-default hg-layout-default",
  // other options ...


This can come in handy especially when dealing with multiple simple keyboard instances.

How to synchronize multiple instances of simple-keyboard

As shown above, you can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the syncInstanceInputs option to true.

If you want to send a command to all your simple-keyboard instances at once, you can use the dispatch method.

Here’s a demo with both these features in action:

Here’s an example of a full keyboard made out of multiple simple-keyboard instances:

Using several inputs

Set the inputName option for each input you want to handle with simple-keyboard.

For example:

<input class="input" id="input1" value=""/>
<input class="input" id="input2" value=""/>
// Here we'll store the input id that simple-keyboard will be using.
var selectedInput;

// Initialize simple-keyboard as usual
var keyboard = new Keyboard({
  onChange: input => onChange(input)

// Add an event listener for the inputs to be tracked
  .forEach(input => input.addEventListener('focus', onInputFocus));

* When an input is focused, it will be marked as selected (selectedInput)
* This is so we can replace it's value on the onChange function
* Also, we will set the inputName option to a unique string identifying the input (id)
* simple-keyboard save the input in this key and report changes through onChange
onInputFocus = event => {
  // Setting input as selected
  selectedInput = `#${}`;

  // Set the inputName option on the fly !

// When the current input is changed, this is called
onChange = input => {
  // If the input is not defined, grabbing the first ".input".
  let currentInput = selectedInput || '.input';

  // Updating the selected input's value
  document.querySelector(currentInput).value = input;

Having keys in a different language configuration

There’s a number of key layouts available. To apply them, check out simple-keyboard-layouts.

If you’d like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.

How to customize my keyboard layout

If you’d like to create a layout in a language not currently supported by simple-keyboard-layouts, you definitely can.

Take following demo as an example:

If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:

r12a Unicode converter

Why is the caps lock button working like shift button

For the sake of simplicity, caps lock and shift do the same action in the main demos. If you’d like to show a different layout when you press caps lock, check out the following demo:

How to display a full keyboard

You can display a full keyboard by linking together multiple Simple Keyboard instances. This is because you might want different sections of your keyboard to have different spacing and styling.

Please refer to the documentation on the syncInstanceInputs option, which allows you to sync the input of all your simple-keyboard instances.

Also, check out this demo:

How implement show / hide toggle functionality

In order to keep simple-keyboard lightweight, some features that are easier to implement have not been added to core. They are instead added to demo snippets. This is the case with the show/hide functionality. By handling the show/hide functionality, you’ll be able to better control the transition animations and behavior.

Check out this demo for an example:

How to validate input

While validation is out of the scope of simple-keyboard, you can easily add your own validation to simple-keyboard callbacks (such as “onChange” and “onKeyPress“.

Check out the following demo for an example:

How to restrict input

Restricting input is quite different to input validation. Input validation often means letting users type normally, then as they finish typing or hit a “submit” button, you tell them if the input is valid or not.

Restricting input however, means that if the user hits a key that doesn’t match a criteria (RegEx), it will be ignored. This is a bit like setting an input element to the “number” type.

Input restriction in simple-keyboard

Input restriction in simple-keyboard is accomplished through Regular Expressions (RegEx). For example, if you want to only allow numbers as input (and ignore all other input), you’d use the inputPattern option:

inputPattern: /^\d+$/;

Check out the following demo for an example:

How to group buttons together in the same row

As of simple-keyboard 2.19.0, it is possible to group buttons together within the same row. This is useful in cases where you would like to apply a specific styling to a subset of buttons in your row. Like in the following case (notice the positioning of the arrow up and arrow down buttons):

To group buttons together, you simply need to wrap them around square brackets in your layout, like so:

layout: {
    'default': [
      '` [1 2 3 4 5 6 7 8 9] 0 - = {bksp}'

In this example, buttons 1 to 9 are grouped together in a div container.

To see a more complete example, check out the following demo:

Last Updated:

Do you have a question not covered here?

If you have a specific use-case, or a question regarding implementation, feel free to reach out by:

Response time is quite short, ranging from just a few minutes to less than a day.

Support development of this library: