컴포넌트
InputOtp
자동 포커스 이동과 붙여넣기 분배를 지원하고, 활성 캐럿 글로우가 슬라이드하며 완성 시 좌→우 성공 스윕이 흐르는 OTP 코드 입력 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputOtp-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| length | number | 6 | 자리(셀) 개수. |
| mode | "numeric" | "alphanumeric" | "numeric" | 입력 허용 문자 타입(숫자만 / 영숫자). |
| mask | boolean | false | 입력 글자를 •로 가림(비밀번호 스타일). |
| separator | boolean | false | 가운데 지점에 대시(–) 구분자 표시. |
| size | number | 52 | 셀 하나의 크기(px). |
| disabled | boolean | false | 입력 비활성화. |