OTP Field

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

검증 또는 복구 코드처럼 짧고 고정 길이의 값을 입력하세요. 각 슬롯은 실제 입력입니다. 한 번에 도착하는 붙여넣기나 자동 완성 값은 슬롯 전체에 채워집니다. Field.Label이 첫 슬롯을 이름 짓습니다. 나머지 슬롯은 위치별 aria-label로 이름을 지으세요.

• 일반 비밀번호나 긴 식별자를 슬롯으로 나누지 마세요. 대신 단일 Input을 사용하세요.
• 완료된 입력을 성공적인 검증으로 취급하지 마세요. 서버 검증, 만료, 재전송을 제품에서 처리하세요.
• 로그나 상태 메시지에 실제 코드를 반복하지 마세요. 값이 아닌 상태를 보고하세요.
• mask를 암호화로 취급하지 마세요. 값만 시각적으로 숨길 뿐 제출된 값을 암호화하지 않습니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Field → Label + Description + OTPField.Root(length) → Input slots / optional Group + decorative Separator; one hidden validation/submission input

키보드와 접근성

입력하면 다음 슬롯으로 이동합니다. 화살표 키, Home, End는 슬롯 사이를 이동합니다. Backspace와 Delete는 편집합니다. 전체 코드 붙여넣기와 IME 조합이 작동합니다. 방향은 DirectionProvider와 DOM dir을 모두 설정하세요. disabled는 편집과 제출에서 필드를 제외합니다. readOnly는 읽기 가능하고 제출된 상태로 유지합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { OTPField, Field } from '@surflane/ui'

<Field.Root name='verificationCode'>
  <Field.Label>Verification code</Field.Label>
  <Field.Description>Enter the six-digit code.</Field.Description>
  <OTPField.Root length={6} required>
    {Array.from({ length: 6 }, (_, index) => (
      <OTPField.Input
        key={index}
        aria-label={index === 0 ? undefined : `Character ${index + 1} of 6`}
      />
    ))}
  </OTPField.Root>
  <Field.Error />
</Field.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰