컴포넌트
OTP Input
분할된 인증 코드(OTP) 입력 컴포넌트. 입력 시 자동으로 다음 칸으로 이동하고, 붙여넣기하면 여러 칸에 자동 분배되며, 백스페이스로 이전 칸으로 이동한다. 값이 채워진 칸은 브랜드 컬러로 강조되고 짧은 펄스 애니메이션이 나타나며, 모든 칸이 채워지면 완료 콜백을 호출한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/OTPInput-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| length | number | 6 | 코드 입력 칸의 개수 |
| value | string | undefined | 현재 값 (제어 컴포넌트로 사용 시). 미지정 시 내부 상태로 비제어 동작 |
| defaultValue | string | "" | 비제어 모드의 초기 값 |
| onChange | (value: string) => void | undefined | 값이 변경될 때 호출되는 콜백 (부분 입력 포함) |
| onComplete | (value: string) => void | undefined | 모든 칸이 채워졌을 때 호출되는 콜백 |
| type | "numeric" | "alphanumeric" | "numeric" | 입력 허용 문자 타입 (숫자만 또는 영숫자) |
| disabled | boolean | false | 입력 비활성화 여부 |
| mask | boolean | false | 입력한 글자를 가려 비밀번호처럼 점(•)으로 표시 |
| autoFocus | boolean | false | 마운트 시 첫 번째 칸에 자동 포커스 |
| size | number | 48 | 칸 하나의 크기(px) |
| label | string | "인증 코드" | 접근성 그룹 레이블 |
| className | string | undefined | 추가 CSS 클래스 |