OTPField - OLUN. Design System

필수 props: `label`은 필수이며 `length` 기본값은 6입니다.
value: controlled value와 defaultValue를 모두 지원합니다.
callback props: `onValueChange`는 매 입력마다, `onComplete`는 길이가 채워졌을 때 호출합니다.
fluid: `fluid`는 좁은 폭에서 숫자 칸을 줄여 6자리를 한 줄로 유지합니다.

기본

6자리 숫자 코드

인증 코드

문자로 받은 6자리 숫자를 입력합니다.

코드 보기tsx

import { OTPField } from "@olundot/ui";

export function VerificationCodeField() {
  return (
    <OTPField surface="canvas"
      label="인증 코드"
      name="verificationCode"
      helperText="문자로 받은 6자리 숫자를 입력합니다."
    />
  );
}

좁은 폭

모바일 폭에서 한 줄 유지

모바일 인증 코드

좁은 화면에서도 6칸을 한 줄로 유지합니다.

코드 보기tsx

import { OTPField } from "@olundot/ui";

export function FluidVerificationCodeField() {
  return (
    <div className="w-full max-w-[320px]">
      <OTPField
        surface="canvas"
        fluid
        label="모바일 인증 코드"
        name="mobileVerificationCode"
        helperText="좁은 화면에서도 6칸을 한 줄로 유지합니다."
      />
    </div>
  );
}

제어 값

value와 callback props

보안 코드

코드가 모두 채워지면 확인 단계로 이동할 수 있습니다.

코드를 기다리는 중

코드 보기tsx

import { useState } from "react";
import { OTPField } from "@olundot/ui";

export function ControlledVerificationCodeField() {
  const [code, setCode] = useState("");
  const [completeCode, setCompleteCode] = useState("");
  return (
    <div className="grid gap-2">
      <OTPField surface="canvas"
        label="보안 코드"
        name="securityCode"
        value={code}
        onValueChange={setCode}
        onComplete={setCompleteCode}
        helperText="코드가 모두 채워지면 확인 단계로 이동할 수 있습니다."
      />
      <p className="text-sm text-text-tertiary">
        {completeCode ? `입력 완료: ${completeCode}` : "코드를 기다리는 중"}
      </p>
    </div>
  );
}

상태

오류, 비활성, 4자리 코드

초대 코드

4자리 코드를 모두 입력합니다.

시험 입장 코드

응시 시작 전 감독관이 발급한 코드입니다.

코드 보기tsx

import { OTPField } from "@olundot/ui";

export function OTPFieldStates() {
  return (
    <div className="grid gap-5">
      <OTPField surface="canvas"
        label="초대 코드"
        length={4}
        defaultValue="12"
        errorText="4자리 코드를 모두 입력합니다."
        invalid
      />
      <OTPField surface="canvas"
        label="시험 입장 코드"
        defaultValue="482913"
        helperText="응시 시작 전 감독관이 발급한 코드입니다."
        readOnly
      />
    </div>
  );
}