NumberField

Overview

A numeric input container built on Reka UI's NumberFieldRoot, providing increment/decrement controls, min/max constraints, and v-model binding.

Theme entry: NumberField

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
modelValue	number		undefined	The controlled numeric value.
defaultValue	number		undefined	The default value when uncontrolled.
min	number		undefined	The minimum allowed value.
max	number		undefined	The maximum allowed value.
step	number		undefined	The amount the value changes per increment or decrement step.
stepSnapping	boolean		undefined	When false, prevents snapping to the nearest step increment.
focusOnChange	boolean		undefined	When true, focuses the input when the value changes.
formatOptions	object		undefined	Intl.NumberFormatOptions to format the displayed value.
locale	string		undefined	The locale used for formatting.
disabled	boolean		undefined	When true, prevents interaction with the number field.
readonly	boolean		undefined	When true, the field is read-only.
disableWheelChange	boolean		undefined	When true, prevents value changes on mouse wheel scroll.
invertWheelChange	boolean		undefined	When true, inverts the direction of wheel-driven value changes.
id	string		undefined	The id of the underlying input element.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.
name	string		undefined	The name submitted with form data.
required	boolean		false	When true, the field is required.

Slots

default

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.

Full event reference

Source

client/lib/controls/number-field/NumberField.vue