Number Input

Input of single numbers pleasant to the user and practical.

Default

If you need to add a component that handles a single number, use the component vs-input-number. You can also change the increment and decrement button icons using the properties icon-inc and icon-dec respectively.

Color

You can change the color of the Input-Number with the property color. You are able to use the Main Colorsopen in new window or RGB and HEX colors.

WARNING

Only RGB and HEX colors are supported.

Min - Max

You can restrict the maximum number or the minimum with the properties vs-min, vs-max.

Size

To change the size of the component, you can use the property vs-size. The allowed values are: medium, small, and mini.

Step

To change the number to be added or decreased of the component, you can use the property step.

Decimal

Number Input also supports decimal values.

Label

Number Input supports adding labels for number inputs.

passengers:

API #

NameTypeParametersDescriptiondefault
colorStringRGB, HEX, primary, success, danger, warning, darkComponent color.
maxNumberMaximum number admitted.
minNumberMinimum number admitted.
sizeStringmedium, small, miniComponent size.
icon-packStringIcon Pack Class NameIcon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.material-icons
icon-decStringicon nameIcon used to indicate decrement.remove
icon-incStringicon nameIcon used to indicate increment.add
stepNumbervalid numberNumber to be added or decreased each time.1
labelStringAdd a descriptive text in the input number.