Keyboard

Wrap a form in KeyboardProvider and each field gets its own keys: letters for a name, an @ key for email, and number pads for a phone, an amount or a PIN.

With placement="inline" the keys take the bottom of the screen and the content above them shrinks and scrolls.

With placement="overlay" the keys slide over the content, which can still scroll its last lines above them.

With placement="drawer" the keys open in a bottom drawer that shows a copy of the field above them.

Set enterKeyHint to pick what Enter does, here Next and then Go, and data-keyboard-enter to give it your own label.

Pass several layouts and the globe key cycles through them, starting with the first, here English, Turkish and Arabic.

Pass pinyin to candidates for the Chinese layout, and typed pinyin shows a strip of matching characters to pick from.

Render Keyboard on its own with kind="pin" and read each digit from onKey, with no field to type into.

Set shuffle to place the PIN pad's digits in a new order each time it mounts, so the pattern of taps gives less away.

Every layout written in the Latin alphabet, from English and Turkish to the experimental Yorùbá one.

The Cyrillic layouts, including the experimental pre-reform Russian one, and Greek.

Eastern Armenian, the experimental Western Armenian layout, and Georgian.

The Arabic script layouts, Hebrew and N'Ko, which lay their keys out and type from right to left.

Hindi, Bengali, Assamese, Punjabi, Odia and the Dravidian layouts, with vowel signs on the main layer.

Thai and Burmese, whose letters spread over the main and shifted layers.

The pinyin, kana and Hangul layouts, shown without candidates, so Chinese types its Latin letters.