Number Input

Shared label and supporting-text behaviour with catnip-input is summarised on Inputs overview.

catnip-input-number

Props

Value & constraints

Prop	Type	Default	Options	Description
modelValue	number | null	null	—	Numeric value; model-value in HTML / .modelValue in frameworks.
min	number	—	—	Minimum value; steppers and typing are clamped on commit.
max	number	—	—	Maximum value; steppers and typing are clamped on commit.
step	number	1	—	Increment/decrement amount for steppers and arrow keys. Also sets display precision: 0.1 → 1 decimal, 0.01 → 2, 1 → integers.
placeholder	string	"0"	—	Shown when modelValue is null.

Digit grouping & decimals

Prop	Type	Default	Options	Description
separateAt	number	—	—	Group the integer part every N digits from the right. Omit or 0 = off.
separator	string	","	,, ., (space)	Thousands separator when separateAt > 0. Must differ from decimalSeparator.
decimalSeparator	string	"."	,, .	Character between integer and fractional parts (e.g. 1,5 vs 1.5).

Field presentation

Prop	Type	Default	Options	Description
label	string	""	—	Visible label text when the label slot is empty.
optional	boolean	false	—	Shows optional hint on the label when not required.
optionalText	string	""	—	Overrides optional hint text (HTML: optional-text).
info	string	""	—	Info tooltip on the label (info wins over the label.suffix slot when both are set).
alignment	string	"left"	left, center, right	Label alignment.
requiredMarker	string	"*"	—	Visual required marker (HTML: required-marker).
requiredScreenReaderText	string	""	—	Supplemental screen-reader text for required fields (HTML: required-screen-reader-text).
supportingText	string | string[] | { text, intent?, icon? } | { text, intent?, icon? }[]	Message(s) below the field. See Inputs overview — Multiple supporting messages.

State

Prop	Type	Default	Options	Description
size	string	"m"	s, m, l	Dimensions and typography.
intent	string	"neutral"	neutral, warning, danger, success	Status styling; danger sets aria-invalid.
disabled	boolean	false	—	Disables the control and steppers.
readonly	boolean	false	—	Read-only control and steppers.
required	boolean	false	—	Native required and label marker.
ariaLabel	string	""	—	aria-label when there is no visible label.
ariaDescribedby	string	""	—	Extra id values merged into aria-describedby (in addition to supporting-text id when supportingText is set).

Advanced

Prop	Type	Default	Options	Description
id	string	""	—	DOM id for the input. Auto-generated when omitted.
name	string	""	—	Native name for form submission.
autofocus	boolean	false	—	Autofocus (use sparingly).
hideLabel	boolean	false	—	Hides the built-in label row.
testSelectors	object	See Test Selectors	—	Overrides for data-test.

Events

Name	Payload	Description
update:modelValue	number | null	Value changed (unformatted number).

Slots

Label row

Name	Description
label	Custom label content; falls back to label prop.
label.action	Trailing action in the label row (e.g. link).
label.suffix	Custom label suffix (suffix slot); used only when info is empty.

Test selectors

Attribute	Default	Applies to
root	catnip-input-number	Field wrapper
control	catnip-input-number-control	The native text input
decrementButton	catnip-input-number-decrement	Decrease (−) button
incrementButton	catnip-input-number-increment	Increase (+) button
supportingText	catnip-input-supporting-text	Supporting message