InputNumber Component

InputNumber is a special input component designed specifically for entering numbers, providing increment and decrement buttons for users to adjust values.

Basic Usage

Basic number input that supports entering numbers and adjusting values through control buttons.

Current value: 0

Show Code

Step Setting

Set the step size for value changes through the step attribute, default is 1.

Step: 1 (default)

Step: 5

Step: 10

Current value: 0

Show Code

Value Range Limitation

Limit the input value range through min-value and max-value attributes.

No limit

Min value: 0

Max value: 100

Range: 0 - 100

Show Code

Control Buttons

Control whether to show increment/decrement buttons through the is-controls attribute, default is true.

Show control buttons

Hide control buttons

Current value: 0

Show Code

Different Sizes

InputNumber supports three sizes: small, default, and large.

Small

Default

Large

Show Code

Range Input

Set the is-range attribute to enable range input mode, allowing input of two values simultaneously.

Basic range

Limited range

Current value: [0, 100]

Show Code

InputNumber API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	number / number[]	—	—
size	Size	string	small / default / large	default
placeholder	Placeholder text	string	—	—
disabled	Whether disabled	boolean	—	false
step	Counter step	number	—	1
min-value	Minimum value	number	—	—
max-value	Maximum value	number	—	—
is-range	Whether range input	boolean	—	false
is-controls	Whether show control buttons	boolean	—	true
debounce	Debounce callback	(value: number / number[]) => void	—	—
debounce-delay	Debounce delay (ms)	number	—	1000

Events

Event Name	Description	Parameters
focus	Triggered when input is focused	(value: number / number[])
blur	Triggered when input loses focus	(value: number / number[])
enter	Triggered when Enter key is pressed	(value: number / number[])
input	Triggered when input value changes	(value: number / number[])
clear	Triggered when clear button is clicked	—

Slots

Slot Name	Description
default	Input default content
spe	Range selector separator content

Style Variables

The InputNumber component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$border-color-default	Border color - Default
$text-color-default	Text color - Default
$font-size-small	Font size - Small
$font-size-default	Font size - Default
$font-size-large	Font size - Large