InputNumber

Allows input of standard numeric values within a defined range.

Basic Usage

Bind a variable with v-model, and use min and max attributes to limit the input range.

Current value: 1

Basic Usage

Disabled State

Use the disabled attribute to disable the input field.

Disabled State

Step

Use the step attribute to control the step size.

Step size is 2

Step

Precision

Use the precision attribute to control numeric precision.

Precision set to 2 decimal places

Precision

Controls Position

Use controls-position="right" to place control buttons on the right.

Controls Position

Different Sizes

Use the size attribute to control the input size.

Different Sizes

Prefix and Suffix

Use prefix and suffix attributes to add prefix and suffix text.

¥

%

$USD

Prefix and Suffix

Clearable

Use the clearable attribute to enable the clear button.

Shows clear button on hover

Clearable

Custom Validation

Use the validator attribute to define custom validation rules.

Validation range: 0 ~ 100

Custom Validation

Use in Nuxt

InputNumber fully supports Nuxt 3/4 SSR rendering. When used in a Nuxt project, the component is automatically imported.

Use in Nuxt

SSR Notes:

• ✅ Basic numeric input and step calculations are fully supported.
• ✅ Precision handling is formatted server-side.
• ✅ Control button styles and positions are consistently supported in SSR.
• ⚠️ Keyboard event listeners only take effect after client-side activation.

SSR Safety

InputNumber handles numeric precision and boundary constraints during the SSR phase, ensuring the values displayed on the first screen are as expected, avoiding hydration mismatches.

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value	number	—
min	Minimum value	number	-Infinity
max	Maximum value	number	Infinity
step	Step size	number	1
step-strictly	Whether to restrict input to multiples of step	boolean	false
precision	Numeric precision	number	—
size	Size	'large' | 'default' | 'small'	'default'
disabled	Whether to disable	boolean	false
readonly	Whether to set read-only	boolean	false
controls	Whether to show control buttons	boolean	true
controls-position	Position of control buttons	'' | 'right'	''
prefix	Prefix text	string	—
suffix	Suffix text	string	—
prefix-icon	Prefix icon	Component	—
suffix-icon	Suffix icon	Component	—
clearable	Whether it is clearable	boolean	false
validator	Custom validation function	(value: number | undefined) => boolean | string	—
placeholder	Input placeholder	string	—
value-on-clear	Value when cleared	number | null | 'min' | 'max'	null

Events

Event Name	Description	Callback Parameters
change	Triggered when value changes	(currentValue: number | undefined, oldValue: number | undefined) => void
input	Triggered on input	(value: number | undefined) => void
focus	Triggered on focus	(event: FocusEvent) => void
blur	Triggered on blur	(event: FocusEvent) => void
clear	Triggered on clear	() => void

Slots

Slot Name	Description
prefix	Custom prefix content
suffix	Custom suffix content
decrease-icon	Custom decrease button icon
increase-icon	Custom increase button icon

Expose

Name	Description	Type
focus	Focus the input	() => void
blur	Blur the input	() => void
clear	Clear the value	() => void

Theme Variables

Variable	Description	Default
--yh-input-number-width	Input width	150px
--yh-input-number-height	Input height	var(--yh-component-size-default)
--yh-input-number-font-size	Font size	var(--yh-font-size-base)
--yh-input-number-bg-color	Background color	var(--yh-fill-color-blank)
--yh-input-number-border-color	Border color	var(--yh-border-color)
--yh-input-number-btn-color	Button color	var(--yh-text-color-secondary)