Virtual Keyboard

Display a virtual keyboard on a touch screen.

The virtual keyboard simulates a physical keyboard on a computer screen or mobile device. It allows the user to enter text without using a physical keyboard. It is especially useful when the physical keyboard is inaccessible, such as on a kiosk or a touch totem.

Display the virtual keyboard

To display the virtual keyboard, click on Components and select the Virtual Keyboard.

Double-click on the component to display the keyboard in your interface.

You can choose between several types of virtual keyboard. In the properties, choose the keyboard of your choice: Mobile, iPad, Digital or a language keyboard (French, Arabic, Burmese etc.).

You can choose between light and dark mode.

If you want to create a keyboard effect, use the states to create a transition.

Display text with the virtual keyboard

For text input you can use the Text Input component or a simple text block. It all depends on your UI.

The user simply types on the keys of the virtual keyboard.

Via the Text Input component

Insert a Text Input component. To display the text from the virtual keyboard in this component, select the virtual keyboard and add a new action.

Choose the Validated event and the Interact with a component > Text input > Set text action. Add a data binding From Event > Input Value.

The text appears in the field, once it is validated on the keyboard.

Via a text block

Insert a text block.

Add a data binding: From a component > Virtual keyboard > Input value.

The text is automatically updated according to the user’s input.

Clear input

To clear the text entered automatically, select the triggering event (e.g. a button, screen display) and the Interact with a component action. Select the Virtual Keyboard component and the Clear Input action.