Skip to content
ENالعربية

Keypad

Beta
Get Ritla UI

A number pad for amounts and PINs, with a decimal point or 000 and a darker delete key; it never mirrors.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

PreviewCode
EnglishMirroredArabic
LTR →

Installation

  1. Add the component

    npx ritla add keypad

    Also works with shadcn: npx shadcn@latest add @ritla/keypad

  2. Dependencies it brings

    @phosphor-icons/react

  3. Or copy by hand

    Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

keypad.tsx
import { Keypad } from "@/components/ui/keypad";<Keypad onKey={(k) => setValue((v) => v + k)} onDelete={() => setValue((v) => v.slice(0, -1))} deleteLabel="Delete" />

API reference

Keypad

PropTypeDefaultDescription
onKey(key: string) => voidNoneA key was pressed: 0 to 9, “.” or “000”.
onDelete() => voidNoneThe delete key.
decimal"dot" | "000" | "none""dot"Figma's Decimal; none for PINs.
deleteLabelstringNoneThe delete key's name.
disabledbooleanNoneTurns every key off.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

KeyAction
TabMoves from key to key in reading order.
EnterSpacePresses the focused key.

ARIA

  • Every key is a button; the delete key is named by deleteLabel.
  • Show what was typed in a live region above the pad.

Arabic and RTL notes

Mirrors

  • Nothing.

Does not mirror

  • The pad keeps a phone's layout (1 2 3 on top, delete at the bottom right) in Arabic too.
Numerals
The keys show the reader's digits: 1 or ١, from numerals on RitlaProvider.
Arabic typography
numeric-24 Semibold keys.