The <mi-keyboard> element can be used to show a onscreen keyboard. Please note that this component is not compatible with Internet Explorer and that it should be tied to a input element with the inputElement attribute to output the entered value.

Working alphabetic example:

Working numeric example:

Example usage:

<!-- HTML -->

<input id="uniqueId" type="text">
<mi-keyboard layout="alphabetic"></mi-keyboard>
// JavaScript

const inputElement = document.getElementById('uniqueId');
const keyboard = document.querySelector('mi-keyboard');
keyboard.inputElement = inputElement;

inputElement attribute

A inputElement attribute is available on the <mi-keyboard> element, which should be used to tie the mi-keyboard element to the input element where the entered values should be outputted. A unique id is required for the input element set.

layout attribute

A layout attribute is available on the <mi-keyboard> element, which should be used to specify the keyboard layout. When alphabetic is set the keyboard language layout is set automatically based on the browser's language when the component is initialized. The default value is alphabetic.

The following values are accepted:


<!-- HTML -->

<mi-keyboard layout="alphabetic"></mi-keyboard>

A table showing which alphabetical layouts and languages are supported and mapped together:

Keyboard layout Browser language
unitedStatesAlphabetic en, en-us
danishAlphabetic da, da-dk


Property Attribute Description Type Default
inputElement -- The active input element. HTMLInputElement undefined
layout layout The keyboard layout to use. Defaults to alphabetic. string KeyboardLayout.Alphabetic