컴포넌트 · 입력

NumberPad

POS 금액 입력, 키오스크 휴대폰 번호 입력, 앱 결제 비밀번호에 쓰는 숫자 키패드입니다. 키 높이는 --control-h-lg 토큰을 따라 플랫폼마다 달라집니다.

금액 입력 (POS)

00 키로 빠르게 입력하고, 금액은 입력 즉시 쉼표로 포맷합니다.

받을 금액

12,800원

비밀번호 입력 (App)

숫자를 표시하지 않고 점으로만 진행 상태를 보여줍니다. 보안 키패드는 키 배열을 무작위로 섞을 수 있습니다.

결제 비밀번호를 입력해 주세요

6자리 숫자

플랫폼별 키 크기

플랫폼키 높이숫자 크기variant
App · QR54px21pxflat
POS64px26pxtile
KIOSK88px34pxtile

사용 규칙

이렇게 하세요

  • 물리 키보드 숫자 입력도 함께 지원
  • 키를 누르면 80ms 안에 눌림 피드백
  • 금액 입력 위에 현재 값 · 최대값 표시

이렇게 하지 마세요

  • 휴대폰 번호 입력에 보안(셔플) 키패드
  • 키 간격 없이 붙여서 오입력 유발 (tile 권장)
  • 소수점이 필요 없는 곳에 . 키 배치

Props

PropTypeDefault설명
onKey*(key: string | "back" | "clear" | "00") => void—키 입력
variant"flat" | "tile""flat"tile은 키마다 배경
withDoubleZerobooleanfalse좌하단을 00 키로
applyPadKey()(current, key, maxLen?) => string—입력 값 계산 헬퍼