Skip to Content
ComponentsIcignalInputNumber

InputNumber

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

개요

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

주요 특징

  • ✅ 증감 버튼: +/- 버튼으로 값 조절
  • ✅ 범위 제한: min, max 값 설정
  • ✅ step 조절: 증감 단위 설정
  • ✅ 다양한 크기: xs, sm, md, lg, xl
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

States

분석에 사용할 샘플 수

사용 예시

예시 1: KPI 목표값 설정

분기 목표를 설정합니다.

분기 목표 전환율

예시 2: 분석 파라미터

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

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

한 페이지 결과 수

API Reference

Props

PropTypeDefaultDescription
valuenumber-값 (제어 컴포넌트)
defaultValuenumber-기본 값
stepnumber1증감 단위
minnumber-최소 값
maxnumber-최대 값
onChange(value: number | undefined) => void-값 변경 핸들러
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

기본 사용법

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
InputInputPassword