Skip to content

Add an on-screen Virtual Keyboard component for touch HMI / kiosk scenarios (alphanumeric + numpad, custom layouts) #2576

Description

@franklupo

Is your feature request related to a problem? Please describe.

I build operator-panel HMIs for industrial machinery (PLC-driven plants) using Blazor + Radzen. These run on touchscreen industrial PCs with no physical keyboard. Today the only option for text/number entry is the operating system's built-in on-screen keyboard, which is visually ugly and poorly usable in an industrial HMI context: it doesn't match the app theme, covers the wrong part of the screen, can't be tailored to the machine's needs, and generally breaks the experience.

There is currently no Radzen component to provide a clean, integrated on-screen keyboard for touch input.

Describe the solution you'd like

An on-screen virtual keyboard that opens automatically on focus, attached to the existing input components (RadzenTextBox, RadzenNumeric, RadzenTextArea, RadzenPassword, etc.).

Key capabilities:

  • A Type option to choose the keyboard mode: Alphanumeric, Numpad, or All (same idea as KioskBoard's data-kioskboard-type = keyboard / numpad / all).
  • A Placement option (e.g. top / bottom / near the focused control).
  • Custom key layouts — the ability to define your own set of keys/buttons (e.g. units of measure, plant-specific symbols, shortcut keys), not just the default QWERTY/numpad. simple-keyboard's layout config is a good model for this.
  • Locale-aware layouts (QWERTY / QWERTZ / AZERTY, and a numpad with a localized decimal separator — comma vs dot), important for IT/DACH markets.

Describe alternatives you've considered

  • OS on-screen keyboard — current fallback. Ugly, off-theme, not configurable, poor HMI usability (the reason for this request).
  • Wrapping an existing JS library via JS interop. Works but means shipping/maintaining a non-Radzen dependency and styling it to match the theme by hand. Existing JS libraries that prove the pattern is well established:
    • simple-keyboardhttps://github.com/hodgef/simple-keyboard — pure ES6, no dependencies, ~5kb, fully custom layouts, works in React/Angular/Vue/vanilla. The de-facto standard for kiosk/touch on-screen keyboards (~87k weekly downloads, MIT).
    • KioskBoardhttps://github.com/furcan/KioskBoard — attaches to input/textarea via data attributes, with keyboard / numpad / all types and top/bottom placement. Closest match to the attach-on-focus behavior requested here.
    • MindFusion JavaScript Virtual Keyboardhttps://mindfusion.dev/javascript-keyboard.html — commercial component explicitly targeting touchscreen terminals, POS, kiosks and industrial/medical devices. Shows there's a paid market for exactly this.

A first-class Radzen component would avoid the interop/styling overhead and stay theme-consistent out of the box.

Additional context

  • Primary use case: industrial operator-panel HMIs on touch PCs without a physical keyboard, driving PLC-based plants.
  • The attach-on-focus behavior on existing inputs is the most important part. A standalone RadzenVirtualKeyboard component (always-visible, or attachable to non-Radzen fields) would be a nice bonus, but the on-focus integration is what solves the problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions