NumericTextBox
Represents the KendoVue NumericTextBox component. Use the NumericTextBox to let the user type a number or change it with the spin buttons.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:NumericTextBoxProps
Syntax:
<NumericTextBox :default-value="10" :min="0" :max="100" :step="5" />Properties
accessKey?
string
Sets the accessKey of the NumericTextBox.
ariaLabel?
string
Sets the aria-label attribute of the input DOM element.
defaultValue?
number
Sets the initial value. The NumericTextBox then updates the value on its own.
dir?
string
Sets the dir HTML attribute of the NumericTextBox.
disabled?
boolean
Sets whether the NumericTextBox is disabled.
false
fillMode?
"flat" | "solid" | "outline"
Sets the fill mode of the NumericTextBox. The fill mode controls the background and the border.
The available options are:
- solid
- outline
- flat
undefined
format?
string | NumberFormatOptions
Sets the number format of the value (see example). When you set it to null or undefined, the NumericTextBox uses the default format.
iconName?
string
Sets the name of the input icon. This property works only with the Kendo UI for Vue FontIcons. To learn how to load the Font Icons in your project, see the Icons article.
id?
string
Sets the id of the input DOM element. The floating label uses it as its target.
inputAttributes?
Object
Sets the native HTML attributes of the inner focusable input element.
You cannot change the attributes that the NumericTextBox needs to work.
inputClass?
string
Sets additional CSS classes to the input element.
inputPrefix?
string | boolean | object | Function
Sets the content of the NumericTextBox prefix. Accepts a slot name, a render function, or a Vue component.
The template receives the current value and the valid state of the NumericTextBox.
inputSuffix?
string | boolean | object | Function
Sets the content of the NumericTextBox suffix. Accepts a slot name, a render function, or a Vue component.
The template receives the current value and the valid state of the NumericTextBox.
inputType?
string
Sets the type of the input DOM element.
The available options are:
- (Default)
tel textnumeric
'tel'
label?
string
Renders a floating label for the NumericTextBox.
max?
number
Sets the greatest value that the user can enter.
min?
number
Sets the smallest value that the user can enter.
modelValue?
number
Sets the value of the NumericTextBox when you use v-model.
name?
string
Sets the name of the input DOM element.
onBlur?
(event: any) => void
Fires when the NumericTextBox loses the focus. The event name is blur.
onChange?
(event: any) => void
Fires when the user changes the value. The event name is change.
onFocus?
(event: any) => void
Fires when the NumericTextBox gets the focus. The event name is focus.
placeholder?
string
Sets the placeholder text of the input element.
required?
boolean
Sets whether null is a valid value for the component.
rounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the NumericTextBox.
The available options are:
- none
- small
- medium
- large
- full
undefined
showClearButton?
boolean
Sets whether the NumericTextBox shows the clear button. Defaults to false.
showLoadingIcon?
boolean
Sets whether the NumericTextBox shows the loading icon. Defaults to false.
showValidationIcon?
boolean
Sets whether the NumericTextBox shows the validation icon. Defaults to false.
size?
"small" | "medium" | "large"
Sets the size of the NumericTextBox.
The available options are:
- small
- medium
- large
undefined
spinners?
boolean
Sets whether the NumericTextBox renders the Up and Down spin buttons (see example).
true
step?
number
Sets the value that the NumericTextBox adds or subtracts when the user increases or decreases the value (see example).
1
tabIndex?
number
Sets the tabIndex of the NumericTextBox.
title?
string
Sets the title of the input element of the NumericTextBox.
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Sets whether the NumericTextBox shows its invalid state. When you set it to false, the NumericTextBox does not show the invalid state.
true
value?
number
Sets the value of the NumericTextBox. Use it to control the value.
wrapperClass?
string
Sets additional CSS classes to the wrapper element.