Number Input

Numeric input with increment and decrement buttons. Supports min/max clamping, step, and decimal precision. Arrow keys also increment and decrement.

Examples

Quantity

With step

Price

Controlled

Seats

1 seat selected

Sizes

Small

Medium

Large

Error state

Quantity

Must be at least 1.

Props

value

number

Controlled value.

defaultValue= 0

number

Initial value for uncontrolled usage.

onChange

(value: number) => void

Called with the new numeric value on change.

min

number

Minimum allowed value. Disables decrement at boundary.

max

number

Maximum allowed value. Disables increment at boundary.

step= 1

number

Increment/decrement amount.

precision

number

Decimal places to round to on commit.

size= 'md'

'sm' | 'md' | 'lg'

Height and text size.

label

string

Label rendered above the input.

hint

string

Helper text shown below.

error= false

boolean

Applies error border and hint colour.

disabled= false

boolean

Disables all interaction.

readOnly= false

boolean

Shows value but prevents editing.

placeholder

string

Placeholder text.

className

string

Additional classes on the wrapper.

Prop	Type	Default	Description
value	number	—	Controlled value.
defaultValue	number	0	Initial value for uncontrolled usage.
onChange	(value: number) => void	—	Called with the new numeric value on change.
min	number	—	Minimum allowed value. Disables decrement at boundary.
max	number	—	Maximum allowed value. Disables increment at boundary.
step	number	1	Increment/decrement amount.
precision	number	—	Decimal places to round to on commit.
size	'sm' \| 'md' \| 'lg'	'md'	Height and text size.
label	string	—	Label rendered above the input.
hint	string	—	Helper text shown below.
error	boolean	false	Applies error border and hint colour.
disabled	boolean	false	Disables all interaction.
readOnly	boolean	false	Shows value but prevents editing.
placeholder	string	—	Placeholder text.
className	string	—	Additional classes on the wrapper.

PreviousInput NextOTP Input