ui
GitHub

Number Field

A numeric input with increment, decrement, and scrub controls.

Docs
number-field-demo.tsx
import { NumberField, NumberFieldScrubArea } from "@/components/ui/number-field"
 
export function NumberFieldDemo() {
	return (
		<NumberField className="mx-auto" defaultValue={5} min={0} max={100}>
			<NumberFieldScrubArea />
		</NumberField>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/number-field.json

Usage

Imports
import { NumberField, NumberFieldScrubArea } from "@/components/ui/number-field"
Anatomy
<NumberField>
	<NumberFieldScrubArea />
</NumberField>