reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/OtpField

OtpField

컴포넌트

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

관련 문서
bun add @reopt-ai/opt-ui
100%

기본 6자리 (숫자)

인증 코드

입력: (없음)

4자리 PIN (마스킹)

PIN

영숫자 8자리

초대 코드

테스트 커버리지

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도 제출에서 제외한다

관련 컴포넌트

Text

본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.

Heading

문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다.

Separator

콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.

Toggle

눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.

Accordion

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

Meter

범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다.

이전Separator다음Toggle

텍스트 역할과 톤

본문은 body 역할의 semantic token을 사용합니다.

레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui

Heading 의미와 시각적 계층

Display 스타일, h4 의미

섹션 스타일, h5 의미
중첩 스타일, h6 의미

가로 구분선

위 콘텐츠

아래 콘텐츠

라벨 구분선

또는

세로 구분선

프로필
설정
로그아웃

단독 Toggle

상태: 꺼짐

단일 선택 그룹 (정렬)

선택: left

다중 선택 그룹 (서식)

선택: bold

단일 (collapsible)

Core·Shells·Surfaces로 구성된 공유 UI 컴포넌트 라이브러리입니다. 차트는 opt-charts가 담당합니다.

다중 (multiple)

여러 패널을 동시에 열 수 있습니다.
이 패널도 함께 열려 있습니다.

기본

디스크 사용량72%
비밀번호 강도45%
용량90%
배터리12%

크기