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 field label when the label slot is empty.
optional	boolean	false	—	When true and not required, shows the localized optional hint.
optionalText	string	""	—	Overrides the localized optional hint (HTML: optional-text).
info	string	""	—	Info tooltip beside the label; when non-empty, it wins over the label.suffix slot.
alignment	"left" | "center" | "right"	"left"	left, center, right	Horizontal alignment of the field label block.
requiredMarker	string	"*"	—	Visual marker for required fields (HTML: required-marker).
requiredScreenReaderText	string	""	—	Optional screen-reader supplement; it does not replace required on the control (HTML: required-screen-reader-text).
supportingText	SupportingTextProp	""	—	One or more helper or validation messages. Each object requires text; intent accepts neutral, danger, warning, or success, and icon accepts a Catnip icon name. See supporting-text examples.

State

Prop	Type	Default	Options	Description
size	"s" | "m" | "l"	"m"	s, m, l	Control heights 32px, 40px, and 48px with corresponding typography.
intent	"neutral" | "danger" | "warning" | "success"	"neutral"	neutral, danger, warning, success	Semantic state applied to field and supporting-text styling; danger sets aria-invalid on the input.
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 alongside generated supporting-text ids.

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	TestSelectorsProp	See Test Selectors	—	Overrides stable data-test values.

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