OtpField

core

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션 지원.

100%

기본 6자리 (숫자)

인증 코드

입력: (없음)

4자리 PIN (마스킹)

PIN

영숫자 8자리

초대 코드

테스트 커버리지

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

OtpField 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

OtpField Props

Prop	타입	기본값	설명
`length`	`number`	—	셀 개수 (기본 6)
`value`	`string`	—	제어 모드 값
`defaultValue`	`string`	—	비제어 초기값
`onChange`	`(value: string) => void`	—	값 변경 콜백
`onComplete`	`(value: string) => void`	—	모든 셀이 채워지면 1회 호출
`type`	`"numeric" \| "alphanumeric"`	—	허용 문자 (기본 numeric)
`mask`	`boolean`	—	채워진 셀을 점(•)으로 마스킹 (PIN 용)
`disabled`	`boolean`	—	비활성화
`name`	`string`	—	폼 필드명. 전체 값을 담은 hidden input 렌더
`label`	`string`	—	필드 레이블
`error`	`string`	—	에러 메시지
`hint`	`string`	—	도움말 텍스트

Import

tsx

import { OtpField } from "@reopt-ai/opt-ui";