MudKeyboard 1.0.2

<p align="center"> <img src="https://raw.githubusercontent.com/sardar97/mudkeyboard/master/src/MudKeyboard/wwwroot/mudkeyboard_logo.svg" alt="MudKeyboard — a pure-Blazor on-screen virtual keyboard" width="540"> </p>

MudKeyboard

A free, open-source on-screen virtual keyboard for Blazor and MudBlazor applications. Built for touchscreens, kiosks, point-of-sale terminals and any interface where a hardware keyboard is unavailable or impractical.

Documentation and live demo: mudkeyboard.pages.dev

Highlights

• JavaScript-free core. Rendering, the text engine, shift/caps and the symbol toggle are 100% C# and Blazor. A single tiny, optional ES module powers exactly one feature: the global docked keyboard that pops up on input focus.
• Themed by MudBlazor. Every colour comes from MudBlazor CSS variables, so dark/light mode and your theme cascade to the keyboard automatically, with no extra code.
• AOT and trim friendly. No reflection, no dynamic code. The library is marked IsAotCompatible, so trim and AOT analyzers run on every build.
• Multi-targeted. Supports .NET 8, 9 and 10 with the Interactive Server and WebAssembly render modes.
• Versatile. Ships a full QWERTY keyboard, a numpad, a pence-first pricepad and a custom-layout engine, plus an optional global docked keyboard.

Render modes: the library is render-mode agnostic — your app picks InteractiveServer or InteractiveWebAssembly. Static SSR is not supported, as a virtual keyboard needs interactivity.

Inline keyboard	Numpad / Pricepad	Global docked keyboard

Install

dotnet add package MudKeyboard

MudBlazor is a peer dependency — MudKeyboard reuses your existing MudBlazor setup and does not bundle a second theme. If you do not have MudBlazor yet, follow its getting-started guide first.

<PackageReference Include="MudBlazor" Version="9.*" />
<PackageReference Include="MudKeyboard" Version="1.0.2" />

Add the namespaces to _Imports.razor:

@using MudKeyboard.Components
@using MudKeyboard.Models

Quickstart

Inline full keyboard — two-way binding

<MudTextField @bind-Value="_text" Label="Name" Variant="Variant.Outlined" />
<MudKeyboard @bind-Value="_text" OnEnter="Submit" MaxLength="40" />

@code {
    private string _text = string.Empty;
    private void Submit() { /* Enter was pressed */ }
}

Numpad

<MudNumpad @bind-Value="_number" AllowDecimal="true" />

@code { private string _number = string.Empty; }

Pricepad (pence-first currency entry)

Typing 5, 2, 3 yields £5.23 — the last DecimalPlaces digits are always the fraction.

<MudPricepad @bind-Value="_price" CurrencySymbol="£" DecimalPlaces="2" />

@code { private string _price = string.Empty; }

Custom layout

A layout is just data — rows of key tokens. Literal tokens are typed verbatim; brace tokens such as {bksp} are commands (see Key tokens).

<MudKeyboard @bind-Value="_value" Variant="KeyboardVariant.Custom" Layout="MyLayout" />

@code {
    private string _value = string.Empty;

    private static readonly KeyboardLayout MyLayout = new()
    {
        Rows = new string[][]
        {
            ["m", "u", "d"],
            ["k", "e", "y"],
            [KeyTokens.Space, KeyTokens.Backspace, KeyTokens.Enter],
        },
    };
}

For the complete API reference and runnable examples, see the documentation site.

Global docked keyboard

A single host component shows a keyboard that slides up from the bottom when any input is focused and types at the caret of that field. This is the one feature that uses JavaScript (a small focus-capture shim shipped as a static web asset).

1. Register the services in Program.cs:

using MudKeyboard.Extensions;

builder.Services.AddMudServices();   // MudBlazor
builder.Services.AddMudKeyboard();   // MudKeyboard docked-keyboard services

2. Place the host once in your main layout (next to the MudBlazor providers):

<MudThemeProvider @bind-IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudKeyboardHost />   @* once, anywhere in the layout *@

That is all — every editable text or number field now raises the keyboard on focus. The layout is inferred per field (text maps to QWERTY, number to numpad, and so on).

Controlling which fields attach

By default (KeyboardAttachMode.AllInputs) every editable field attaches. Opt out, opt in, or force a layout with data attributes:

// Only attach to fields explicitly marked with data-mudkeyboard
builder.Services.AddMudKeyboard(o => o.AttachMode = KeyboardAttachMode.OptIn);

<MudTextField @bind-Value="_amount" data-mudkeyboard-layout="money" Immediate="true" />
<MudTextField @bind-Value="_note"  data-mudkeyboard-ignore="true" Immediate="true" />

Use Immediate="true" on MudBlazor inputs so the bound value updates as keys are tapped.

The docked panel also includes clear, copy, paste and cursor controls, and automatically docks one layer above the top-most element on the page, so it floats over dialogs and overlays.

Components and parameters

<MudKeyboard>

<MudNumpad>

Value/ValueChanged, AllowDecimal, MaxLength, Disabled, OnEnter, Palette, Class, Style.

<MudPricepad>

Value/ValueChanged, CurrencySymbol (default £), DecimalPlaces (default 2), MaxLength, Disabled, OnEnter, Palette, Class, Style.

<MudKeyboardHost>

Palette, Elevation (default 8), MinZIndex (default 1400), Style.

Theming

The keyboard reads the ambient MudBlazor theme — toggle MudThemeProvider's dark mode and every key follows, with no extra code. To recolour a single keyboard without touching the app theme, pass a KeyboardPalette. Any slot you leave unset still follows the theme, so dark/light keeps working:

<MudKeyboard @bind-Value="_value" Palette="Brand" />

@code {
    private static readonly KeyboardPalette Brand = new()
    {
        AccentColor = "#00897b",      // Enter / active-shift keys
        AccentTextColor = "#ffffff",
        // Surface, KeyColor, KeyTextColor left unset → follow the theme
    };
}

Values are any CSS colour — a hex string, rgb()/hsl(), or a var(--…) reference.

Built-in layouts

LayoutLibrary exposes the shipped layouts: Qwerty, Symbols, Numeric, Numpad, NumpadWithDecimal, and Price.

Key tokens

Inside a KeyboardLayout, any token wrapped in braces is a command; everything else is a literal character. The well-known tokens are constants on KeyTokens:

AOT and trimming

The library targets net8.0;net9.0;net10.0 and sets <IsAotCompatible>true</IsAotCompatible>, which enables the trim, AOT and single-file analyzers on every build — there is no reflection or dynamic code to trip them. Only primitive strings cross the JS interop boundary, so the focus-capture shim is AOT/trim-safe too.

Demos

Two runnable demos live under demo/:

dotnet run --project demo/MudKeyboard.Demo.Server   # Interactive Server
dotnet run --project demo/MudKeyboard.Demo.Wasm     # Interactive WebAssembly

The Server demo showcases every variant, two-way binding, the OnEnter callback, a custom layout, a KeyboardPalette override and the global docked keyboard. A hosted version is available on the documentation site.

Contributing and building

Contributions are welcome. To build and test locally:

dotnet build                                   # build everything
dotnet test tests/MudKeyboard.Tests            # run the unit and bUnit tests

Please open an issue or pull request on GitHub.

Support the project

MudKeyboard is free and open source, maintained in spare time. If it saves you work and you would like to support its continued development, donations are gratefully received:

Donate via PayPal

Starring the repository and reporting issues are equally appreciated and cost nothing.

License

MIT © Sardar Qaslany