Number Field

An input for numbers with decrement / increment buttons. Hold a button to repeat; arrow up / down step with a keyboard; typed values are clamped on Enter or blur.

Usage

@Local qty: number = 3;

SNumberField({ value: this.qty!!, min: 0, max: 10 })
Text(`value = ${this.qty}`)

Approximate web preview — the HarmonyOS rendering is the reference.

Step, decimals & states

SNumberField({ defaultValue: 1.5, step: 0.25, decimals: 2, min: 0 })
SNumberField({ defaultValue: 18, min: 0, max: 100, invalid: true })
SNumberField({ defaultValue: 5, disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SNumberField

shadcn-vue NumberField (NumberFieldContent + Decrement + Input + Increment in one component): an input with centred text and − / + buttons inside it.

• Holding − / + repeats (touch / mouse); a click, Space / Enter or the screen reader steps once. The value is clamped to [min, max] and rounded to the step's precision.
• Typing is free; the text is parsed and clamped on Enter or blur (invalid text reverts).
• Keyboard: arrow up / down step while the input is focused.
• decimals formats the shown value with a fixed number of decimals (formatOptions-lite).

Prop	Type	Default	Description
value!!	number | undefined	undefined	Controlled value (use with !!). Leave undefined for uncontrolled.
defaultValue	number	0
min	number | undefined	undefined
max	number | undefined	undefined
step	number	1
decimals	number | undefined	undefined	Fixed number of decimals shown (undefined = as needed).
disabled	boolean	false
invalid	boolean	false
label	string | undefined	undefined	Accessible name when there is no visible label.

Event	Type	Default	Description
onValueChange	(v: number) => void	() => { }