Neumorphism UI
폼과 선택@neumorphism-ui/input-otp

Input OTP

input-otp의 포커스·붙여넣기·자동 이동 동작을 그대로 사용하고 각 slot만 뉴모피즘 표면으로 표현합니다. 화면에는 여러 칸이 보이지만 접근성 트리와 폼 값은 하나의 입력으로 유지됩니다.

@neumorphism-ui/input-otp
Registry JSON

미리보기

설치

설치: input-otpnpx shadcn@latest add @neumorphism-ui/input-otp

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

Input OTP import 코드
"use client";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp";

Example

Input OTP 사용 코드
export default function Example() {
  return <InputOTP maxLength={6} defaultValue="123456" aria-label="인증 코드">
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>;
}

API 레퍼런스

컴포넌트속성타입기본값설명
InputOTPmaxLength필수number—허용할 인증 코드 길이를 지정합니다.
InputOTPvalue / defaultValuestring—controlled 또는 초기 uncontrolled 코드 값을 지정합니다.
InputOTPonChange(value: string) => void—전체 코드 값이 바뀔 때 호출됩니다.
InputOTPcontainerClassNamestring—slot 그룹을 감싸는 외부 컨테이너를 확장합니다.
InputOTPSlotindex필수number—전체 코드에서 이 시각적 slot이 표시할 위치입니다.

접근성

  • 01

    InputOTP에 인증 코드의 목적을 설명하는 aria-label 또는 연결된 label을 제공합니다.

  • 02

    여러 slot이 보여도 실제 입력은 하나이므로 문자마다 별도의 textbox role을 만들지 않습니다.

  • 03

    붙여넣기와 키보드 입력을 막지 말고 오류 메시지는 별도의 설명 텍스트로 연결합니다.