🌏 Translated with the assistance of DeepSeek and ChatGPT

Input Number

A dedicated input box for entering numbers. Apart from that, it is very similar to Input and has most of Input's features.

Basic Usage

This component is used for numeric input. Pass in modelValue to enter controlled mode. If not passed or set to undefined, it is in uncontrolled mode. In this case, you can use the defaultValue property as the default value.

Hide source code

Value Range

Set the value range using the max and min properties. Both ends are inclusive.

Hide source code

Step

Set the increment/decrement step using the step property. When the strickStep property is true, the value must be an integer multiple of step.

Hide source code

Precision

Set the precision using the precision property, which specifies the number of decimal places.

Hide source code

Custom Template

Set the number display template by passing the format, allowInput, and parse properties together. For example, you can display units or use thousands separators.

Hide source code

Button Placement

The position of the increment/decrement buttons can also be configured using the buttonPlacement property.

Hide source code

More Options

This InputNumber has most of Input component's features.

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

+

s

Composite

Status

Expose

Hide source code

API

InputNumberProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		Value of the number input (controlled mode), supports v-model.	0.0.2
defaultValue	string | null	True		Default value of the number input (uncontrolled mode).	0.0.2
placeholder	string	True		Placeholder text.	0.0.2
disabled	boolean	True	false	Whether the input is disabled.	0.0.2
readonly	boolean	True	false	Whether the input is readonly.	0.0.2
max	number	True	Number.MAX_SAFE_INTEGER	Maximum value (inclusive).	0.0.2
min	number	True	Number.MIN_SAFE_INTEGER	Minimum value (inclusive).	0.0.2
step	number	True	1	Increment/decrement step for the spin buttons.	0.0.2
precision	number	True		Number of decimal places, must be an integer between 0 and 100.	0.0.2
strickStep	boolean	True	false		0.0.2
format	(value: number | Nullish) => string	True		Function to convert the numeric value to a display string.	0.0.2
allowInput	(value: string) => boolean	True		Function to validate whether the typed text is allowed.	0.0.2
parse	(value: string) => number	True		Function to convert the input text to a numeric value.	0.0.2
clearable	boolean	True	false	Whether to show a clear button.	0.0.2
loading	boolean	True	false	Whether to show a loading state.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Size of the number input.	0.0.2
shape	'rect' | 'round'	True	'rect'	Shape of the number input.	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True			0.0.2
buttonPlacement	boolean	True	'end'	Position of the increment/decrement buttons.	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.0.2
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.0.2
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

InputNumberEvents

Event	Parameter	Description	Version
input	value: number, e: Event	Callback fired on input.	0.0.2
update:modelValue	value: number	Callback fired when modelValue is updated.	0.0.2
change	value: number, e: Event | undefined	Callback fired when the value changes.	0.0.2
clear	value: number	Callback fired when the clear button is clicked.	0.0.2
blur	e: FocusEvent	Callback fired when the input loses focus.	0.0.2
focus	e: FocusEvent	Callback fired when the input receives focus.	0.0.2

InputNumberSlots

Slot	Parameter	Description	Version
prefix		Prefix content.	0.0.2
suffix		Suffix content.	0.0.2

InputNumberExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focus the number input.	0.0.2
blur	() => void	False		Blur the number input.	0.0.2
clear	() => void	False		Clear the number input.	0.0.2
select	() => void	False		Select all text in the number input.	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`