Number Input

Numeric input with native minimum, maximum, and step support.

Installation

bash

pnpm dlx shadcn@latest add @cs/number-input

tsx

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

tsx

<NumberInput name="quantity" label="Quantity" min={1} step={1} />

Numeric input with native minimum, maximum, and step support.

Name	Type	Default	Description
button	Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> \| undefined	-	Button displayed inside the input on the right.
defaultValue	number	-	Initial numeric value for uncontrolled usage.
error	string \| null \| undefined	-	Validation error message for the field.
icon	ReactNode	-	Icon displayed inside the input on the left.
inputClassName	string \| undefined	-	Additional classes applied to the native input control.
label	ReactNode	-	Field label and fallback placeholder.
onValueChange	(value: number \| null) => void	-	Called with the parsed number or `null` when the field is cleared.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	Layout of the field label and input control.
value	number	-	Controlled numeric value.