Neumorphism UI

Input OTP

길이가 정해진 인증 코드를 글자별 슬롯으로 보여 주며 입력할 때 사용합니다.

미리보기

여섯 자리 인증 코드

여섯 슬롯을 세 자리씩 두 그룹으로 나누고 중간에 구분선을 배치합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/input-otp

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

maxLength와 이름을 지정하고 각 인덱스에 대응하는 InputOTPSlot을 렌더링하세요. 그룹과 구분선은 시각적으로만 나누며 값은 하나의 입력으로 유지합니다.

"use client";

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

export default function Example() {
  return (
    <InputOTP maxLength={4} aria-label="Verification code" autoComplete="one-time-code">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  );
}

API 레퍼런스

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

컴포넌트속성타입기본값설명
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

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