# 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 Colors or RGB and HEX colors.


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.



Name Type Parameters Description default
color String RGB, HEX, primary, success, danger, warning, dark Component color.
max Number Maximum number admitted.
min Number Minimum number admitted.
size String medium, small, mini Component size.
icon-pack String Icon Pack Class Name Icon 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-dec String icon name Icon used to indicate decrement. remove
icon-inc String icon name Icon used to indicate increment. add
step Number valid number Number to be added or decreased each time. 1
label String Add a descriptive text in the input number.