Number fieldforms

Base UI number field with locale formatting, commit-on-blur clamp and step snapping, wheel scrub off by default and contextual stepper labels.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/number-field

의존 아이템button input locale style

Default

Value: 2

number-field-demo.tsx

"use client";
import * as React from "react";import { NumberField } from "@/components/ui/number-field";
export default function NumberFieldDemo() {  const [nights, setNights] = React.useState<number | null>(2);  return (    <div className="flex w-56 flex-col gap-2">      <NumberField label="nights" aria-label="Nights" value={nights} onValueChange={setNights} min={1} max={30} name="nights" />      <p className="text-sm text-muted-foreground">Value: {nights === null ? "empty" : nights}</p>    </div>  );}