إدخال الأرقام

إدخال الأرقام 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

التثبيت

npx sdaia-ui@latest add number-input

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

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

حقل الإدخال الرقمي الافتراضي بنمط صلب وأدوات تحكّم دوّارة.

Loading demo: number-input-default

الأرقام input with a solid border style.

Loading demo: number-input-solid

الأرقام input with a subtle underline-only style.

Loading demo: number-input-subtle

الأرقام input with visible increment and decrement spinner buttons.

Loading demo: number-input-spinner

الأرقام input available in كبير and متوسط sizes.

Loading demo: number-input-sizes

الأرقام input in the error state showing a validation message.

Loading demo: number-input-error

الأرقام input in the disabled state, preventing interaction.

Loading demo: number-input-disabled

خصائص مكوّن NumberInput.

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