Number Input

registry/examples/number-input-demo.tsx

import { NumberInput } from "@/registry/ui/number-input"

export default function NumberInputDemo() {

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/number-input.json

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={5} min={0} max={100} />

Use the step prop to control the increment/decrement amount.

registry/examples/number-input-step.tsx

import { NumberInput } from "@/registry/ui/number-input"

export default function NumberInputStep() {

Control the value with value and onChange.

Value: 10

registry/examples/number-input-controlled.tsx

"use client"

import * as React from "react"

registry/examples/number-input-disabled.tsx

import { NumberInput } from "@/registry/ui/number-input"

export default function NumberInputDisabled() {

Prop	Type	Default	Description
`value`	`number`	-	Controlled value
`defaultValue`	`number`	-	Default value (uncontrolled)
`onChange`	`(value: number \| undefined) => void`	-	Called when the value changes
`min`	`number`	-	Minimum allowed value
`max`	`number`	-	Maximum allowed value
`step`	`number`	`1`	Increment/decrement step
`disabled`	`boolean`	`false`	Disable the input
`allowEmpty`	`boolean`	`false`	Allow empty value

Key	Action
`ArrowUp`	Increment value
`ArrowDown`	Decrement value