Number Field

숫자를 직접 입력하거나 증가·감소 버튼으로 조절해야 할 때 사용합니다.

미리보기

워크스페이스 좌석 수

3석에서 시작해 1석부터 8석까지 제한된 범위에서 조절합니다.

좌석 수

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/number-field

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

NumberField에 레이블을 연결하고 NumberFieldInput을 감소·증가 버튼과 묶으세요. 적절한 범위를 지정하고 두 조절 버튼에도 이름을 제공합니다.

"use client";

import { useId } from "react";
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput } from "@/components/ui/number-field";

export default function Example() {
  const id = useId();
  return (
    <NumberField id={id} defaultValue={1} min={1} max={10}>
      <label htmlFor={id}>Seats</label>
      <NumberFieldGroup>
        <NumberFieldDecrement aria-label="Decrease seats" />
        <NumberFieldInput />
        <NumberFieldIncrement aria-label="Increase seats" />
      </NumberFieldGroup>
    </NumberField>
  );
}

API 레퍼런스

범위·간격·지역별 표시를 지원하는 수량 입력. 증감 버튼마다 이름을 제공하세요. 최솟값·최댓값과 직접 입력을 함께 확인하세요.

컴포넌트	속성	타입	기본값	설명
`NumberField`	`min / max`	`number`	`—`	허용하는 최솟값과 최댓값입니다.
`NumberField`	`step`	`number`	`—`	버튼과 키보드의 증감 간격입니다.
`NumberField`	`locale / format`	`string \| Intl.NumberFormatOptions`	`—`	숫자의 지역별 표시 형식을 설정합니다.

미리보기

워크스페이스 좌석 수

설치

사용법

API 레퍼런스

접근성