NumberPadNew

Import

import { NumberPad } from 'heroui-native-pro';

Anatomy

<NumberPad>
  <NumberPad.Row>
    <NumberPad.Key value="1" />
    <NumberPad.Key value="2" />
    <NumberPad.Key value="3" />
  </NumberPad.Row>
  <NumberPad.Row>
    <NumberPad.Spacer />
    <NumberPad.Key value="0" />
    <NumberPad.Backspace />
  </NumberPad.Row>
</NumberPad>

• NumberPad: Root column container that manages the value state and provides context to sub-components. Auto-renders the default 3×4 digit layout when no children are provided. Supports both controlled and uncontrolled modes.
• NumberPad.Row: Horizontal container that lays out a row of cells with equal widths. Required when composing keys manually.
• NumberPad.Key: Pressable digit key with a subtle press animation. Appends its value to the pad value by default. Renders a default NumberPad.KeyLabel showing its value when no children are provided.
• NumberPad.KeyLabel: Text label rendered inside a key. Defaults to the parent key's value.
• NumberPad.Backspace: Delete key. Press removes one character; long-press clears the entire value. Renders a backspace icon by default.
• NumberPad.Spacer: Grid cell that preserves alignment. Renders an inert empty cell by default; behaves like a NumberPad.Key when given children.

Usage

Basic Usage

Render the default 3×4 keypad by omitting children.

const [value, setValue] = useState('');

<NumberPad value={value} onValueChange={setValue} />;

Manual Composition

Compose the keypad explicitly with rows and keys.

<NumberPad value={value} onValueChange={setValue}>
  <NumberPad.Row>
    <NumberPad.Key value="1" />
    <NumberPad.Key value="2" />
    <NumberPad.Key value="3" />
  </NumberPad.Row>
  ...
  <NumberPad.Row>
    <NumberPad.Spacer />
    <NumberPad.Key value="0" />
    <NumberPad.Backspace />
  </NumberPad.Row>
</NumberPad>

Max Length

Cap the input length and react when it fills up.

<NumberPad
  value={value}
  onValueChange={setValue}
  maxLength={4}
  onComplete={(code) => verify(code)}
/>

Custom Key Content

Use a render function to access key state and style the label.

<NumberPad value={value} onValueChange={setValue}>
  <NumberPad.Row>
    <NumberPad.Key value="1">
      {({ isPressed }) => (
        <NumberPad.KeyLabel
          className={isPressed ? 'text-accent-foreground' : 'text-foreground'}
        >
          1
        </NumberPad.KeyLabel>
      )}
    </NumberPad.Key>
    ...
  </NumberPad.Row>
  ...
</NumberPad>

Spacer Action

Give the spacer cell children to turn it into an action key.

<NumberPad value={value} onValueChange={setValue} onSpacerPress={authenticate}>
  ...
  <NumberPad.Row>
    <NumberPad.Spacer>
      <FingerprintIcon />
    </NumberPad.Spacer>
    <NumberPad.Key value="0" />
    <NumberPad.Backspace />
  </NumberPad.Row>
</NumberPad>

Disabled

Disable the entire keypad.

<NumberPad defaultValue="1234" isDisabled />

Example

import { NumberPad } from 'heroui-native-pro';
import { useState } from 'react';
import { Text, View } from 'react-native';

export default function NumberPadExample() {
  const [value, setValue] = useState('');
  const [isComplete, setIsComplete] = useState(false);

  return (
    <View className="flex-1 px-5 items-center justify-center">
      <View className="w-full gap-6">
        <Text className="text-center text-2xl font-semibold tracking-[0.4em] text-foreground">
          {value.padEnd(4, '•')}
        </Text>
        <NumberPad
          value={value}
          maxLength={4}
          onValueChange={(next) => {
            setValue(next);
            setIsComplete(false);
          }}
          onComplete={() => setIsComplete(true)}
        />
      </View>
    </View>
  );
}

API Reference

NumberPad

NumberPadRootAnimation

Animation configuration for the number pad root component. Can be:

• "disable-all": Disable all animations including children
• undefined: Use default animations

NumberPad.Row

NumberPad.Key

NumberPadKeyRenderProps

NumberPadKeyAnimation

Animation configuration for the key press scale effect. Can be:

• false or "disabled": Disable all animations
• true or undefined: Use default animations
• object: Custom animation configuration

NumberPad.KeyLabel

NumberPad.Backspace

NumberPadBackspaceIconProps

NumberPad.Spacer