Number Field

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

범위, 단계, 표시 형식이 필요한 숫자를 입력하세요. Increment와 Decrement 버튼 옆에 직접 입력을 제공하세요. 통화 같은 표시 문자열과 기본 숫자를 분리하세요.

계산되지 않는 식별자(전화번호, 우편번호 등)에는 쓰지 마세요. 대신 Input을 쓰세요. 작은 증가에 클릭을 여러 번 요구하지 말고, 드래그를 유일한 입력 경로로 만들지 마세요. 직접 입력을 유지하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Field(label/description/error) → Root → Group(Decrement + Input + Increment); optional ScrubArea

키보드와 접근성

• 값을 직접 입력하세요.
• Up과 Down 화살표 키, Increment와 Decrement 버튼은 값을 바꿉니다. min과 max를 존중합니다.
• readOnly와 disabled는 별개의 상태입니다.
• 폼 초기화는 uncontrolled 값을 초기값으로 되돌리고, controlled 값은 부모의 값을 유지합니다. 취소된 변경과 초기화를 존중합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { NumberField, Field } from '@surflane/ui'

<Field.Root name='attempts'>
  <Field.Label>Retry attempts</Field.Label>
  <NumberField.Root name='attempts' defaultValue={2} min={1} max={8} step={1}>
    <NumberField.Group>
      <NumberField.Decrement aria-label='Decrease attempts' />
      <NumberField.Input />
      <NumberField.Increment aria-label='Increase attempts' />
    </NumberField.Group>
  </NumberField.Root>
  <Field.Error />
</Field.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰