OTP Field
접근 가능한 하나의 입력에서 일회용 코드를 받고 분할된 시각적 표면으로 렌더링해요.
핵심 속성
| 속성 | 동작 |
|---|---|
| 값 | defaultValue를 쓰면 비제어, value와 onValueChange를 쓰면 제어 상태로 동작해요 |
| 입력 | 입력, 전체 코드 붙여넣기, 삭제, 포커스 이동과 하나의 네이티브 폼 값을 지원해요 |
| 자동 완성 | 첫 슬롯 기본값은 one-time-code이고 비밀번호 관리자와 플랫폼 자동 완성을 지원해요 |
| 길이 | 값을 제한하고 완료와 유효성을 결정하며, 같은 개수의 Input 파트를 직접 렌더링해야 해요 |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/otp-field.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TROTPField } from '@tinyrack/ui/components/otp-field';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
크기 고유 링크
uiSize로 OTP 슬롯 높이를 인접한 Input, Button, NumberField와 맞춰 보세요.
붙여넣기, 완료, 거부된 문자 고유 링크
4자리 코드를 붙여넣거나 문자를 입력해 허용, 완료, 거부 이벤트의 원인을 확인하세요.
API
TROTPField.Root, TROTPField.Input, TROTPField.Separator 네임스페이스 멤버를 사용하세요. 같은 하위 경로는 접두사가 붙은 TROTPFieldRoot, TROTPFieldInput, TROTPFieldSeparator 바인딩과 속성·상태 타입도 내보내지만 접두사가 없는 Root, TRInput, TRSeparator 바인딩은 내보내지 않아요.
| 파트 | 주요 속성 |
|---|---|
Root | length, value, defaultValue, onValueChange, onValueComplete, onValueInvalid, validationType, normalizeValue, autoComplete, inputMode, mask, name, form, required, disabled, readOnly, autoSubmit, uiSize, ref, render |
Input | 네이티브 입력 속성, className, style, ref, Base UI render |
Separator | orientation(기본값 vertical), TRSeparator 속성 및 ref |
Root는 레이블이 있는 role="group"을 렌더링해요. 보이는 레이블을 만들고 aria-labelledby로 연결하세요. 슬롯 ID는 루트 id에서 파생되며 첫 슬롯에는 기본적으로 one-time-code 자동 완성이 적용돼요. 값 이벤트의 details.reason으로 입력, 삭제, 붙여넣기 또는 키보드 변경 원인을 구분할 수 있어요. 비활성 필드는 폼 데이터에서 제외되고 읽기 전용 필드는 값을 제출해요.