# Numpad

**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Numpad/

A keypad for entering numbers.

## Import

```tsx
import { Numpad } from '@coinbase/cds-mobile/numpad/Numpad'
```

## Examples

import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage';

### Pin Numpad

Primary use case for this is when a user is inputing a PIN code. Notice it does not have any of the hallmarks of a transactional numpad (CTA, utility button, suggested amounts).

<ThemedImage
  sources={{
    light: useBaseUrl('/img/docs/numpad/pin_numpad.png'),
    dark: useBaseUrl('/img/docs/numpad/pin_numpad_dark.png'),
  }}
  alt="Pin Numpad"
/>

```tsx
const PinNumpadExample = () => {
  // localState
  const [visible, { toggleOn, toggleOff }] = useToggler(false);
  const [value, setValue] = useState('');

  // hooks
  const safeBottomPadding = useSafeBottomPadding();
  const palette = usePalette();

  // callbacks
  const onPress = useCallback((input: NumpadValue) => {
    if (input === DELETE) {
      setValue((preValue) => preValue.slice(0, -1));
    } else if (input !== SEPARATOR) {
      setValue((prevValue) => (prevValue.length < 4 ? prevValue + input : prevValue));
    }
  }, []);

  const onLongPress = useCallback((input: NumpadValue) => {
    if (input === DELETE) {
      setValue('');
    } else if (input !== SEPARATOR) {
      setValue((prevValue) => (prevValue.length < 4 ? prevValue + input : prevValue));
    }
  }, []);

  return (
    <VStack>
      <Button onPress={toggleOn}>Example 2</Button>
      <Modal onRequestClose={toggleOff} visible={visible}>
        <ModalHeader title="PinCode Entry" />
        <ModalBody>
          <VStack alignItems="center" gap={2} paddingTop={8}>
            <HStack>
              {Array.from({ length: 4 }).map((_, index) => (
                <View
                  // eslint-disable-next-line react/no-array-index-key
                  key={index}
                  style={{
                    width: 16,
                    height: 16,
                    borderWidth: 2,
                    borderRadius: 10,
                    borderColor: index < value.length ? palette.primary : palette.backgroundOverlay,
                    backgroundColor: index < value.length ? palette.primary : palette.transparent,
                    margin: 5,
                  }}
                />
              ))}
            </HStack>
            <Text font="headline">Unlock with your PIN</Text>
          </VStack>
        </ModalBody>
        <Box bottom={0} position="absolute" paddingBottom={safeBottomPadding}>
          <Numpad onLongPress={onLongPress} onPress={onPress} separator="" />
        </Box>
      </Modal>
    </VStack>
  );
};
```

### Transactional Numpad

Best when used in the context of a transactional scenario. This could range from the standard Buy / Sell, all the way to Gift, Convert, Stake, etc.

<ThemedImage
  sources={{
    light: useBaseUrl('/img/docs/numpad/transactional_numpad.png'),
    dark: useBaseUrl('/img/docs/numpad/transactional_numpad_dark.png'),
  }}
  alt="Transactional Numpad"
/>

```tsx
const VALUE_MAX = 1000000;
const TransactionalNumpadExample = () => {
  const [visible, { toggleOn, toggleOff }] = useToggler(false);
  const [value, setValue] = useState('100');
  const safeBottomPadding = useSafeBottomPadding();

  const onPress = useCallback((value: NumpadValue) => {
    switch (value) {
      case DELETE:
        setValue((prev) => prev.slice(0, -1));
        break;
      case SEPARATOR:
        setValue((prev) => (prev.includes('.') ? prev : `${prev}.`));
        break;
      default:
        setValue((prev) => {
          const newValue = prev + value;
          return parseFloat(newValue) > VALUE_MAX ? prev : newValue;
        });
    }
  }, []);

  const onLongPress = useCallback((value: NumpadValue) => {
    switch (value) {
      case DELETE:
        setValue('');
        break;
      case SEPARATOR:
        if (!value.includes('.')) {
          setValue((prevValue) => `${prevValue}.00`);
        }
        break;
      default:
        setValue((prev) => {
          const newValue = prev + value;
          return parseFloat(newValue) > VALUE_MAX ? prev : newValue;
        });
    }
  }, []);

  const setValueCallback = useCallback((value: string) => () => setValue(value), []);

  const accessory = useMemo(() => {
    if (value === '')
      return (
        <Banner
          bordered={false}
          numberOfLines={1}
          startIcon="error"
          startIconActive
          title="Invalid Input"
          variant="warning"
        >
          <Text>Enter an amount greater than zero.</Text>
        </Banner>
      );
    if (parseFloat(value) >= VALUE_MAX) {
      return (
        <Banner
          bordered={false}
          numberOfLines={1}
          startIcon="error"
          startIconActive
          title="You've reached the maximum value"
          variant="warning"
        >
          <Text>Max ${VALUE_MAX}</Text>
        </Banner>
      );
    }

    return (
      <VStack paddingX={3}>
        <ButtonGroup block>
          <Button compact onPress={setValueCallback('5')} variant="secondary">
            $5
          </Button>
          <Button compact onPress={setValueCallback('10')} variant="secondary">
            $10
          </Button>
          <Button compact onPress={setValueCallback(VALUE_MAX.toString())} variant="secondary">
            Max
          </Button>
        </ButtonGroup>
      </VStack>
    );
  }, [setValueCallback, value]);

  return (
    <VStack>
      <Button onPress={toggleOn}>Example 1</Button>
      <Modal onRequestClose={toggleOff} visible={visible}>
        <ModalHeader title="BuyAsset Entry" />
        <ModalBody>
          <TextInput
            accessibilityLabel="Text input field"
            helperText="Max $1000000"
            label="Enter amount (USD)"
            placeholder="USD"
            value={value}
          />
        </ModalBody>
        <Box
          borderedTop
          borderColor="secondary"
          bottom={0}
          position="absolute"
          paddingTop={2}
          paddingBottom={safeBottomPadding}
        >
          <Numpad
            accessory={accessory}
            action={
              <VStack paddingX={2}>
                <Button onPress={toggleOff}>Review order</Button>
              </VStack>
            }
            deleteAccessibilityLabel="delete"
            onLongPress={onLongPress}
            onPress={onPress}
            separatorAccessibilityLabel="period"
          />
        </Box>
      </Modal>
    </VStack>
  );
};
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onPress` | `(value: NumpadValue) => void` | Yes | `-` | - |
| `accessory` | `ReactNode` | No | `-` | - |
| `action` | `ReactNode` | No | `-` | - |
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
| `alignItems` | `FlexAlignType` | No | `-` | - |
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
| `animated` | `boolean` | No | `-` | - |
| `aspectRatio` | `string \| number` | No | `-` | - |
| `background` | `Color` | No | `-` | - |
| `borderBottomLeftRadius` | `BorderRadius` | No | `-` | - |
| `borderBottomRightRadius` | `BorderRadius` | No | `-` | - |
| `borderBottomWidth` | `BorderWidth` | No | `-` | - |
| `borderColor` | `Color` | No | `-` | - |
| `borderEndWidth` | `BorderWidth` | No | `-` | - |
| `borderRadius` | `BorderRadius` | No | `-` | - |
| `borderStartWidth` | `BorderWidth` | No | `-` | - |
| `borderTopLeftRadius` | `BorderRadius` | No | `-` | - |
| `borderTopRightRadius` | `BorderRadius` | No | `-` | - |
| `borderTopWidth` | `BorderWidth` | No | `-` | - |
| `borderWidth` | `BorderWidth` | No | `-` | - |
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `DimensionValue` | No | `-` | - |
| `color` | `Color` | No | `-` | - |
| `columnGap` | `Space` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `deleteAccessibilityLabel` | `string` | No | `-` | - |
| `disabled` | `boolean` | No | `-` | - |
| `display` | `none \| flex` | No | `-` | - |
| `elevation` | `Elevation` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
| `feedback` | `HapticFeedbackType` | No | `none` | Haptic feedback to trigger when being pressed. |
| `flexBasis` | `DimensionValue` | No | `-` | - |
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
| `flexGrow` | `number` | No | `-` | - |
| `flexShrink` | `number` | No | `-` | - |
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
| `font` | `FontFamily \| inherit` | No | `-` | - |
| `fontFamily` | `FontFamily \| inherit` | No | `-` | - |
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
| `gap` | `Space` | No | `-` | - |
| `height` | `DimensionValue` | No | `-` | - |
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
| `key` | `Key \| null` | No | `-` | - |
| `left` | `DimensionValue` | No | `-` | - |
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
| `margin` | `NegativeSpace` | No | `-` | - |
| `marginBottom` | `NegativeSpace` | No | `-` | - |
| `marginEnd` | `NegativeSpace` | No | `-` | - |
| `marginStart` | `NegativeSpace` | No | `-` | - |
| `marginTop` | `NegativeSpace` | No | `-` | - |
| `marginX` | `NegativeSpace` | No | `-` | - |
| `marginY` | `NegativeSpace` | No | `-` | - |
| `maxHeight` | `DimensionValue` | No | `-` | - |
| `maxWidth` | `DimensionValue` | No | `-` | - |
| `minHeight` | `DimensionValue` | No | `-` | - |
| `minWidth` | `DimensionValue` | No | `-` | - |
| `onLongPress` | `((value: NumpadValue) => void)` | No | `-` | - |
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
| `opacity` | `AnimatableNumericValue` | No | `-` | - |
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
| `padding` | `Space` | No | `-` | - |
| `paddingBottom` | `Space` | No | `-` | - |
| `paddingEnd` | `Space` | No | `-` | - |
| `paddingStart` | `Space` | No | `-` | - |
| `paddingTop` | `Space` | No | `-` | - |
| `paddingX` | `Space` | No | `-` | - |
| `paddingY` | `Space` | No | `-` | - |
| `pin` | `PinningDirection` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `Position` | No | `-` | - |
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
| `right` | `DimensionValue` | No | `-` | - |
| `rowGap` | `Space` | No | `-` | - |
| `separator` | `string` | No | `-` | - |
| `separatorAccessibilityLabel` | `string` | No | `-` | - |
| `style` | `false \| RegisteredStyle<ViewStyle> \| WithAnimatedObject<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>> \| readonly (ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
| `top` | `DimensionValue` | No | `-` | - |
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
| `width` | `DimensionValue` | No | `-` | - |
| `zIndex` | `number` | No | `-` | - |