Numeric Input

Input numerical values with a customizable range.

Basic usage

Bind a variable to v-model in <b-numeric-input> element and you are set.

TIP

When inputting invalid string to the input box, input value will emit NaN to the upper layer as result of error

Disabled

The disabled attribute accepts a boolean, and if the value is true, the component is disabled. If you just need to control the value within a range, you can add min attribute to set the minimum value and max to set the maximum value. By default, the minimum value is 0.

Steps

Allows you to define incremental steps.

Add step attribute to set the step.

Step strictly

The step-strictly attribute accepts a boolean. if this attribute is true, input value can only be multiple of step.

Precision

Add precision attribute to set the precision of input value.

TIP

The value of precision must be a non negative integer and should not be less than the decimal places of step.

Size

Use attribute size to set additional sizes with large or small.

Controls Position

Set controls-position to decide the position of control buttons.

Attributes

Name	Description	Type	Accepted Values	Default
model-value / v-model	binding value	number / undefined	—	—
min	the minimum allowed value	number	—	-Infinity
max	the maximum allowed value	number	—	Infinity
step	incremental step	number	—	1
step-strictly	whether input value can only be multiple of step	boolean	—	false
precision	precision of input value	number	—	—
size	size of the component	string	large / default / small	default
readonly	same as readonly in native input	boolean	—	false
disabled	whether the component is disabled	boolean	—	false
controls	whether to enable the control buttons	boolean	—	true
controls-position	position of the control buttons	string	right	-
name	same as name in native input	string	—	—
label	label text	string	—	—
placeholder	placeholder in input	string	-	-
value-on-clear	value should be set when input box is cleared	string / number / null	min / max	-
validate-event	whether to trigger form validation	boolean	-	true

Events

Name	Description	Parameters
change	triggers when the value changes	(currentValue: number | NaN, oldValue: number | NaN)
blur	triggers when Input blurs	(event: FocusEvent)
focus	triggers when Input focuses	(event: FocusEvent)

Methods

Method	Description	Parameters
focus	get focus the input component	-
blur	remove focus the input component	—