Vue Number Input Component API

Number Input API

Explore the API reference for the Vue Number Input component and discover how to effectively utilize its props for customization.

On this page

CNumberInput

jsx

import { CNumberInput } from '@coreui/vue'

Props

Property	Default	Type
ariaDecrementLabel	`'Decrease'`	`string`
Sets the accessible label (`aria-label`) of the button that decreases the value.
ariaIncrementLabel	`'Increase'`	`string`
Sets the accessible label (`aria-label`) of the button that increases the value.
disabled	-	`boolean`
Toggle the disabled state for the component.
feedback	-	`string`
Provide valuable, actionable feedback to your users with HTML5 form validation feedback.
feedbackInvalid	-	`string`
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied `validationState="invalid"`.
feedbackValid	-	`string`
Provide valuable, actionable valid feedback when using standard HTML form validation which applied `validationState="valid"`.
floatingClassName	-	`string`
A string of all className you want applied to the floating label wrapper.
floatingLabel	-	`string`
Wrap the control in a floating label.
floatingLabelAlways6.0.0+	-	`boolean`
Keeps the floating label floated and the placeholder visible while the field is empty.
id	-	`string`
The id attribute of the native input, also used by the label.
label	-	`string`
Add a caption for a component.
modelValue	`undefined`	`number`, `string`
The value of the component.
readonly	-	`boolean`
Toggle the readonly state for the component.
repeat	`true`	`boolean`
Repeats the step while a button is held. Set to `false` to require a click per step.
size	`undefined`	`string`
Sizes the control, the way `.form-control-sm` and `.form-control-lg` size a form control.
text	-	`string`
Add helper text to the component.
tooltipFeedback	-	`boolean`
Display validation feedback in a styled tooltip.
validationState6.0.0+	-	`string`
The validation state, rendered as the `is-{state}` class; `'invalid'` also sets `aria-invalid` and blocks the submit. Any custom state declared in the `$form-validation-states` Sass map is accepted. The user's next change of the value emits `update:validationState` with `undefined`.

Events

Event name
change
Event occurs when the element loses focus, after the content has been changed.
input
Event occurs immediately after the value of a component has changed.
update:modelValue
Emit the new value whenever there’s an input or change event.
update:validationState
Event occurs with `undefined` when the user changes the value, or the form is reset, while `validationState` is set. A given state is a verdict on the value it was given for; bind it with `v-model:validation-state` to drop it and let the browser's own validation show again.