Introduction

The number stepper component is used to increase or decrease numeric values. It supports custom step values, maximum and minimum values, thousands separators, precision control, and other features to meet different numeric input scenarios.

Usage

Import it locally by configuring it in the index.json of the page or component where it is needed:

"usingComponents": {
  "number-stepper": "ava-ui/fxui/input-number/index"
}

Code Demo

Functional Usage

Style States

API

Properties

Property	Description	Type	Accepted Values	Default
value	Current value	string	—	''
min	Minimum value	number	—	-Number.MAX_VALUE
max	Maximum value	number	—	Number.MAX_VALUE
step	Step value	number	—	1
size	Size	string	normal/medium/large	medium
disabled	Whether disabled	boolean	—	false
hidden	Whether to hide the input box	boolean	—	false
showThousands	Whether to show thousands separators	boolean	—	false
maskValue	Mask placeholder	string	—	''
maxlength	Maximum input length	number	—	-1
integer_places	Integer digit limit	number	—	-1
decimal_places	Decimal digit limit	number	—	-1
inputWidth	Input box width (px)	number	—	—

Size Specification

The number stepper provides three sizes. Choose the appropriate size for different scenarios.

Size	Description	Height (px)	Button Width (px)	Input Box Width (px)	Font Size (px)
normal	Normal size	24	24	46	12
medium	Medium size (default)	28	28	58	14
large	Large size	32	32	58	16

• normal (24px): Suitable for compact layouts or numeric input in tables.
• medium (28px): Default size, suitable for most scenarios.
• large (32px): Suitable for numeric input that needs emphasis or touch-optimized scenarios.

Events

Event Name	Description	Callback Parameters
change	Triggered when the value changes
input	Triggered on input
focus	Triggered when focused
blur	Triggered when blurred

Notes

• Supports setting the step value through the step property, including decimal steps such as 0.1 and 0.01.
• Supports limiting the numeric range through the min and max properties. Buttons outside the range are automatically disabled.
• Supports displaying thousands separators through the showThousands property, making large numbers easier to read.
• Supports controlling numeric precision through the integer_places and decimal_places properties.
• Supports customizing the input box width through the inputWidth property (unit: px), such as inputWidth={100}.
• Supports setting a placeholder through the maskValue property, displayed when there is no value.
• The component uses a numeric keyboard internally and supports decimals and negative numbers.

打开预览