reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
OtpField
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

OtpField

Component

Enter OTP or PIN codes with individual cells, distributed paste, automatic focus, backspace navigation, and form error associations.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { OtpField } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 6자리 (숫자)

인증 코드

입력: (없음)

4자리 PIN (마스킹)

PIN

영숫자 8자리

초대 코드

OtpField

PropTypeDefaultDescription
lengthnumber—셀 개수 (기본 6)
valuestring—제어 모드 값
defaultValuestring—비제어 초기값
onChange(value: string) => void—값 변경 콜백
onComplete(value: string) => void—모든 셀이 채워지면 1회 호출
type"numeric" | "alphanumeric"—허용 문자 (기본 numeric)
maskboolean—채워진 셀을 점(•)으로 마스킹 (PIN 용)
disabledboolean—비활성화
namestring—폼 필드명. 전체 값을 담은 hidden input 렌더
labelstring—필드 레이블
errorstring—에러 메시지
hintstring—도움말 텍스트
View test results

테스트 커버리지

2026년 7월 9일11/11 통과
11성공
0실패
11전체
  • length만큼 셀을 렌더링한다
  • label을 group accessible name으로 연결한다
  • aria-label prop이 visible label보다 우선한다
  • label이 없어도 기본 group accessible name을 제공한다
  • 입력 시 다음 셀로 포커스가 이동하고 값이 누적된다
  • 숫자 타입은 문자 입력을 거부한다
  • 모두 채우면 onComplete가 호출된다
  • 붙여넣기로 여러 셀을 채운다
  • Backspace로 이전 셀로 이동하며 지운다
  • name이 있으면 전체 값을 담은 hidden input을 렌더링한다
  • disabled 상태에서는 hidden input도 제출에서 제외한다

Related components

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

PreviousSeparatorNextToggle