Skip to Content

InputNumber

숫자 값을 입력하고 증감 버튼으로 조절하는 입력 필드


개요

InputNumber는 숫자 전용 입력 컴포넌트입니다. 증감 버튼과 step 단위 조절, 최소/최대 범위 제한을 지원합니다.

주요 특징

  • 필수값 표시: Label 좌측에 *(Asterisk) 표시
  • 증감 버튼: +/- Stepper 버튼으로 값 조절
  • 범위 제한: min, max 값 설정 및 초과 방지
  • step 조절: 증감 단위 설정
  • 읽기 전용/비활성화: readOnly, disabled 상태 지원
  • 오류 상태 표시: error prop으로 에러 메시지 표시
  • 다양한 크기: xs, sm, md, lg, xl
  • FormItem 통합: 레이블, 설명, 에러 메시지
  • 디자인 토큰: 테마 커스터마이징 지원

Sizes


States

분석에 사용할 샘플 수


사용 예시

필수값 표시

필수 입력 항목은 Label 좌측에 *(Asterisk)를 표시합니다.

읽기 전용 상태

오류 상태 표시

error prop으로 오류 메시지를 표시합니다.

예시 1: KPI 목표값 설정

분기 목표를 설정합니다.

분기 목표 전환율

예시 2: 분석 파라미터

데이터 분석 설정값을 입력합니다.

분석에 사용할 데이터 포인트 수

한 페이지 결과 수


API Reference

Props

PropTypeDefaultDescription
valuenumber-값 (제어 컴포넌트)
defaultValuenumber-기본 값
stepnumber1증감 단위
minnumber-최소 값
maxnumber-최대 값
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
labelAlign"start" | "center" | "end"-레이블 가로 정렬
labelVerticalAlign"start" | "center" | "end"-레이블 세로 정렬
requiredbooleanfalse필수 여부 (* 표시)
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

Events

EventTypeDescription
onChange(value: number | undefined) => void값 변경 시 호출

기본 사용법

import { InputNumber } from "@vortex/ui-icignal" <InputNumber label="수량" defaultValue={10} /> <InputNumber label="비율 (%)" min={0} max={100} step={5} />

접근성

ARIA 속성

<InputNumber label="목표값" min={0} max={100} />

권장 사항

  • label을 통해 입력 목적 전달
  • min/max 설정으로 유효 범위 안내
  • ✅ 키보드: 증감 버튼 Tab 이동, 직접 숫자 입력
  • ❌ 범위 제한 없는 무한 입력 지양

관련 컴포넌트

Last updated on