reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/Core/OtpField

OtpField

Component

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다.

Related docs
bun add @reopt-ai/opt-ui
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

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

Facet

필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다.

Expression

조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다.

TextTruncate

실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다.

Highlight

검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다.

LiveRegion

라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다.

PreviousSeparatorNextToggle

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

StringNumberBooleanDateDate and timeDurationPercentCurrencyEnumArrayObjectJSONIP addressGeo pointURLEmailIdentifierBinaryAggregateNestedUnknown

크기와 채우기

결제 금액

값 분포로 필터하기

선택: safari

표본이 전체보다 작을 때

Chrome4.8만61%
Safari1.9만24%
Edge6.1천7.8%

로딩과 빈 상태

Counting…
No values in this range.

알림 규칙

열린 절: 없음

상태

grouped overall eventsnotifySlack #alerts

컬럼 배치

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

검색어 강조

  • checkout_completed · plan=pro · country=KR
  • checkout_started · plan=free · country=US
  • signup_completed · source=organic · country=KR
  • page_view · path=/pricing · country=JP

검색어 여러 개

checkout_completed 이벤트가 KR 지역에서 12% 증가했고 US 지역에서는 3% 감소했습니다.

스트리밍 카운터

수신한 이벤트0

스크린 리더에는 4초마다 한 번만 요약해 읽어 줍니다. 일시정지하면 안내도 멈춥니다.