컴포넌트
OTP Field
인증 코드를 분리된 입력 칸에 입력합니다.
설치
pnpm dlx ply-ui add otp-field공통 설치 설정을 먼저 적용합니다.
사용법
Root.length와 Input 개수를 맞추세요.
예제는 입력 UI입니다. 코드 발급과 검증은 별도 서비스에 연결해야 합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Root | 코드 길이와 전체 입력값을 관리합니다. |
Input | index에 해당하는 한 자리 입력입니다. 각 자리에 접근 가능한 이름을 지정합니다. |
구현 코드
components/ui/otp-field.tsx
"use client";
import type { ComponentProps } from "react";
import { OTPField as Primitive } from "@base-ui/react/otp-field";
import { withClassName } from "../../lib/cx";
import "./otp-field.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function OTPFieldRoot({
className,
...props
}: ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
{...props}
className={withClassName("rbx-otp", className)}
/>
);
}
function OTPFieldInput({
className,
...props
}: ComponentProps<typeof Primitive.Input>) {
return (
<Primitive.Input
{...props}
className={withClassName("rbx-otp-input", className)}
/>
);
}
// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const OTPField = {
...Primitive,
Root: OTPFieldRoot,
Input: OTPFieldInput,
};
components/ui/otp-field.css
/* OTPField: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-otp {
display: flex;
gap: 8px;
}
.rbx-otp-input {
width: 40px;
height: 48px;
border: 1px solid var(--rbx-color-stroke-default);
background: var(--rbx-color-surface-0);
color: var(--rbx-color-content-emphasis);
text-align: center;
border-radius: 8px;
font-size: 1.25rem;
}