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/NumberInput

NumberInput

Component

숫자 입력 컴포넌트. +/- 버튼, nullable/clear, unit suffix, invalid draft alert, min/max, step, 키보드 화살표를 지원합니다.

input
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

수량
Z-Score 임계값
비활성

Nullable · 단위 · 유효성 상태

할인율
%

값을 비우면 할인을 적용하지 않습니다.

조직 정책으로 잠김
개

현재 값: 35. 숫자가 아닌 문자를 입력하면 즉시 오류가 안내되고, 지우기 버튼은 값을 null로 커밋합니다.

소수 정밀도 (부동소수 오차 없음)

가중치

현재 값: 0.1 — +/- 버튼으로 0.2씩 더해도 0.30000000000000004 같은 누적 오차가 없습니다.

스크럽 + 키보드

드래그해서 조절 (라벨을 좌우로)

라벨을 좌우로 드래그하면 값이 바뀝니다(scrub). 입력란 포커스 후↑/↓ 한 칸, PageUp/PageDown 10칸, Home/End 최소·최대. 스테퍼 버튼은 길게 누르면 반복됩니다.

NumberInput

PropTypeDefaultDescription
valuenumber | null—제어 모드 값. nullable=true일 때 null 허용
defaultValuenumber | null0비제어 모드 초기값. nullable=true일 때 null 허용
onChange(value: number | null) => void—값 변경 핸들러
nullablebooleanfalse빈 값을 null로 커밋할지 여부
clearablebooleanfalsenullable 값 지우기 버튼 표시
minnumber—최솟값
maxnumber—최댓값
stepnumber1증감 단위
labelstring—라벨 텍스트
unitReactNode—입력값 단위 suffix
disabledboolean—비활성 상태
disabledReasonstring—aria-disabled 상태에서 노출할 비활성 사유
labelsNumberInputLabels—입력/증감/clear/invalid 접근성 문구

컴포넌트 의존 관계

깊이
▲ USED BY (3)webhook-configfeature-flag-panelpath-analysisNumberInput
View test results

테스트 커버리지

2026년 7월 9일21/21 통과
21성공
0실패
21전체
  • 기본값으로 렌더링한다
  • + 버튼으로 값이 증가한다
  • - 버튼으로 값이 감소한다
  • min 이하로 감소하지 않는다
  • max 이상으로 증가하지 않는다
  • disabled 상태에서 버튼이 비활성이다
  • error 메시지를 표시한다
  • hint 텍스트를 표시한다
  • required prop이 RequiredMark를 표시한다
  • 소수 step 증가 시 부동소수 오차가 없다
  • step 정수여도 소수 입력을 그대로 편집할 수 있다
  • ArrowUp 키로 값이 증가한다
  • PageUp은 큰 step(기본 step*10)으로 증가한다
  • Home/End는 min/max로 점프한다
  • 스테퍼 버튼 길게 누르면 반복 증가한다
  • 라벨이 없어도 입력 필드에 기본 accessible name을 제공한다
  • 유효하지 않은 draft 입력은 값을 커밋하지 않고 alert로 알린다
  • 유효하지 않은 draft 상태에서 stepper로 유효 값으로 회복한다
  • nullable 입력은 빈 값을 null로 커밋한다
  • nullable clear 버튼과 unit suffix를 렌더링한다
  • disabledReason이 있으면 aria-disabled로 이유를 보존한다

키보드 동작

키동작
↑값 증가 (step 단위)
↓값 감소 (step 단위)

Blocks that use this component

PathAnalysis

경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.

Analytics

Related components

Select

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

Input

Combobox

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

Input

Button

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

Input

Input

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

Input

Switch

토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.

Input

Textarea

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

Input
PreviousDropdownMenuNextSlider