Blazor Virtual Keyboard
A theme-consistent on-screen keyboard for touch HMI, kiosk and POS scenarios - devices without a physical keyboard. The keyboard opens automatically when an input inside it gets focus and types in that input, so value binding works as with a physical keyboard.
Attach the keyboard to inputs linkLink to this section
Wrap the inputs in a RadzenVirtualKeyboard component. Focusing any input or text area inside it - including
RadzenTextBox, RadzenNumeric, RadzenTextArea, RadzenPassword and plain HTML inputs - opens the keyboard.
Key presses raise the native input and change events of the focused input so @bind-Value updates as expected.
The keyboard closes when the input loses focus or when the user taps outside.
To also suppress the on-screen keyboard of the operating system on touch devices add inputmode="none" to the inputs.
Name: Batch 42; Quantity: 10; Notes:
Numeric keypad linkLink to this section
Set Type="VirtualKeyboardType.Numpad" to display a numeric keypad - ideal for entering setpoints and quantities.
The decimal key inserts the decimal separator of the current culture. Use the DecimalSeparator property to override it.
Set Type="VirtualKeyboardType.All" to show the alphanumeric keyboard and the numeric keypad side by side.
Temperature: 65.5 °C; Pressure: 2.4 bar
Keyboard placement linkLink to this section
Use the Placement property to control where the keyboard opens: Bottom (default) and Top display a bar
fixed to the edge of the viewport while Auto opens a popup next to the focused input.
Custom key layout linkLink to this section
Define your own keys with VirtualKeyboardLayout.FromRows - every space-separated token is a key.
A token is either literal text inserted in the input - including multi-character keys such as units of measure or plant-specific symbols -
or one of the special keys {backspace}, {enter}, {shift}, {space},
{tab}, {clear}, {close} and {decimal}.
Locale-aware layouts linkLink to this section
Assign one of the built-in presets - VirtualKeyboardLayout.Qwerty, VirtualKeyboardLayout.Qwertz or
VirtualKeyboardLayout.Azerty - to the Layout property. The shift key switches to the uppercase and symbol layer.
Inline keyboard linkLink to this section
Set Placement="VirtualKeyboardPlacement.Inline" to render an always-visible keyboard in place - useful for PIN pads and dedicated entry screens.
The keys type in the focused input - or in the last focused or first input inside the component when none is focused, so entry works without tapping the input first.
Frequently asked questions
How do I show an on-screen keyboard for Blazor inputs?
Wrap the inputs in a RadzenVirtualKeyboard component. The keyboard opens automatically when one of them gets focus and key presses type in the focused input.
Does the Virtual Keyboard work with @bind-Value?
Yes. Key presses raise the native input and change events of the focused input so value binding of RadzenTextBox, RadzenNumeric, RadzenTextArea, RadzenPassword and plain HTML inputs updates as if typed on a physical keyboard.
Can I define my own keys?
Yes. Set the Layout property to a VirtualKeyboardLayout created with VirtualKeyboardLayout.FromRows - every token is either literal text inserted in the input (including multi-character keys such as units of measure) or a special key like {backspace}, {enter}, {shift}, {space}, {clear} and {close}.
How do I show a QWERTZ or AZERTY keyboard?
Assign one of the built-in presets - VirtualKeyboardLayout.Qwertz or VirtualKeyboardLayout.Azerty - to the Layout property. The {decimal} numpad key inserts the decimal separator of the current culture.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT