Koala UI

On-Screen Keyboard

Pro

A full keyboard for touch screens with no physical one: letters, symbols, shift and a space bar, wired to a value you control.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add on-screen-keyboard

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

It types at the end of the value. Pair the field with readOnly so a phone or tablet does not also open its own keyboard. For digits only, use Keypad.

Sizes#

md suits a tablet in the hand, lg a till and xl a kiosk. Keys share the width they are given, so the keyboard fills its container on every screen.

Layouts and languages#

Rows are plain strings, so any layout is one array away. QWERTY_ES ships with the ñ, and the words on the keys come from LabelsProvider.

API reference#

OnScreenKeyboard

The keyboard. Keys never take focus, so a field keeps its focus ring and caret while someone types. Accepts className, merged last.

PropTypeDefaultDescription
valuestring-The text, controlled.
defaultValuestring""The text when uncontrolled.
onValueChange(value: string) => void-Called on every key that changes the text.
onEnter(value: string) => void-Called by the enter key.
lettersstring[]QWERTYOne string per row. QWERTY_ES adds the ñ.
symbolsstring[]SYMBOLSThe rows of the second layer.
size"md" | "lg" | "xl""lg"Key height: 44, 56 or 64px.
disabledbooleanfalseLocks every key.
enterLabelReactNode-Names what enter does here, such as Search. Falls back to the enter label.
Data attributeDescription
data-slot"on-screen-keyboard", with -row, -key, -shift, -delete, -layer, -space and -enter parts.
data-layer"letters" or "symbols".

FAQ#

It matches how tills and kiosks are used: short values typed in order and corrected with delete. Moving a caret by finger on a small field is slower than retyping.