Number Input

Root · Label · Input · Control · ValueText · IncrementTrigger · DecrementTrigger · Scrubber

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#DecrementTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#IncrementTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the field and its stepper.
`allowMouseWheel`	`boolean`		Whether to allow mouse wheel to change the value
`allowOverflow`	`boolean`	`true`	Whether to allow the value overflow the min/max range
`clampValueOnBlur`	`boolean`	`true`	Whether to clamp the value when the input loses focus (blur)
`defaultValue`	`string`		The initial value of the input when rendered. Use when you don't need to control the value of the input.
`disabled`	`boolean`		Whether the number input is disabled.
`focusInputOnChange`	`boolean`	`true`	Whether to focus input when the value changes
`form`	`string`		The associate form of the input element.
`formatOptions`	`Intl.NumberFormatOptions`		The options to pass to the `Intl.NumberFormat` constructor
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>`		The ids of the elements in the number input. Useful for composition.
`inputMode`	`'text' \| 'tel' \| 'numeric' \| 'decimal'`	`"decimal"`	Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`	`boolean`		Whether the number input value is invalid.
`largeStep`	`number`	`10 * step`	The amount to increment or decrement the value by when the shift key is held
`locale`	`string`	`"en-US"`	The current locale. Based on the BCP 47 definition.
`max`	`number`	`Number.MAX_SAFE_INTEGER`	The maximum value of the number input
`min`	`number`	`Number.MIN_SAFE_INTEGER`	The minimum value of the number input
`modelValue`	`string`		The v-model value of the number input
`name`	`string`		The name attribute of the number input. Useful for form submission.
`pattern`	`string`	`"[0-9]*(.[0-9]+)?"`	The pattern used to check the element's value against
`readOnly`	`boolean`		Whether the number input is readonly
`required`	`boolean`		Whether the number input is required
`smallStep`	`number`	`step / 10`	The amount to increment or decrement the value by when the alt key is held
`spinOnPress`	`boolean`	`true`	Whether to spin the value when the increment/decrement button is pressed
`step`	`number`	`1`	The amount to increment or decrement the value by
`translations`	`numberInput.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states

Event	Payload
`focusChange`	`details: FocusChangeDetails`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: string`
`valueInvalid`	`details: ValueInvalidDetails`

#Scrubber

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

A styled part — no props of its own; it takes the anatomy's shared styling.