Number Input

Number Input lets users enter numeric values with optional spinner controls, supporting solid and subtle styles across multiple sizes and states.

Loading demo: number-input-real-world

Installation

npx sdaia-ui@latest add number-input

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

<NumberInput size="large" style="solid" spinner={true} />

The default number input with solid style and spinner controls.

Loading demo: number-input-default

Number input with a solid border style.

Loading demo: number-input-solid

Number input with a subtle underline-only style.

Loading demo: number-input-subtle

Number input with visible increment and decrement spinner buttons.

Loading demo: number-input-spinner

Number input available in Large and Medium sizes.

Loading demo: number-input-sizes

Number input in the error state showing a validation message.

Loading demo: number-input-error

Number input in the disabled state, preventing interaction.

Loading demo: number-input-disabled

Props for the NumberInput component.

Prop	Type	Default	Required
label	string	-	optional
size	'lg' \| 'md'	'lg'	optional
style	'solid' \| 'subtle'	'solid'	optional
spinner	boolean	false	optional
value	string \| number	-	optional
defaultValue	string \| number	-	optional
onChange	(value: string) => void	-	optional
min	number	-	optional
max	number	-	optional
step	number	1	optional
error	string	-	optional
helperText	string	-	optional
showHelperIcon	boolean	true	optional
disabled	boolean	false	optional