Input OTP

계약

Overview

Machine-readable contract from Component Spec.

component: input-otpexport: InputOTPversion: 1attributes: data-refineui=input-otp

Anatomy

Part	data-refineui
root	input-otp
slot	input-otp-slot

Variants

Axis	Values
size	sm, md, lg

Accessibility

Slot	Element	Role
input-otp	div	group

Keyboard

Key	Action	Native
ArrowLeft	previous-trigger	—
ArrowRight	next-trigger	—

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { InputOTP, InputOTPSlot } from "@refineui/react";

<InputOTP maxLength={6} value={code} onValueChange={setCode}>
  <InputOTPSlot index={0} />
  <InputOTPSlot index={1} />
  <InputOTPSlot index={2} />
  <InputOTPSlot index={3} />
  <InputOTPSlot index={4} />
  <InputOTPSlot index={5} />
</InputOTP>

<InputOTP
  maxLength={4}
  pattern={/\d/}
  size="lg"
  aria-label="Enter verification code"
/>

API 레퍼런스

InputOTP

Prop	Default	Type	Description
value	—	string	제어형 OTP 문자열.
defaultValue	—	string	비제어형 초기 값.
onValueChange	—	(value: string) => void	값 변경 시 이벤트 핸들러.
maxLength	—	number	슬롯 수(필수).
pattern	/\d/	RegExp	문자별 허용 목록(기본: 숫자만).
size	"md"	"sm" | "md" | "lg"	컨트롤 크기 티어.
disabled	false	boolean	인터랙션을 비활성화합니다.
autoFocus	false	boolean	마운트 시 자동 포커스.
aria-label	—	string	컨트롤의 접근 가능한 이름.

InputOTPSlot

Prop	Default	Type	Description
index	—	number	0부터 시작하는 슬롯 인덱스(필수).