폼과 선택@neumorphism-ui/number-field

Number Field

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

@neumorphism-ui/number-field

Registry JSON

미리보기

좌석 수

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";

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

Example

export default function Example() {
  const id = React.useId();
  return (<NumberField id={id} defaultValue={3} min={1} max={8}><label htmlFor={id} className="text-sm font-semibold">{"좌석 수"}</label><NumberFieldGroup><NumberFieldDecrement aria-label={"좌석 줄이기"} /><NumberFieldInput /><NumberFieldIncrement aria-label={"좌석 늘리기"} /></NumberFieldGroup></NumberField>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성