Input Number component allows user to Take Number as a input.

# Playground
You can create your Component
 <lv-number
     :controls="true"
     :max="100"
     :step="1"
     placeholder="default color rgba(0, 0, 0, 0.3)"
     help-text="You can create your Component"
     label="This is the best demo"
     placeholder-color="rgba(0, 0, 0, 0.3)"
     :iconLeft="light-icon-minus"
     :iconRight="light-icon-plus"
 />
Realtime Customizations













#Basic Usage

You can use the Number Input component with some basic and complex use cases like setting placeholder through placeholder prop. There is also a prop called helpText to specify a text that will display below the input. You can also specify a label by using the label prop. LightVue number input is Both compatible with Vue 3.x and Vue 2.x

#Customise Icons

You can use the Number input with custom icons .You can set the left and right icon through icon-left and icon-right prop respectively.You can also speecify the button color through button-color prop.
You can also use Light Icons from LightVue and pass it into the input.

#Material Effect

You can set the bottom bar to Number input by setting bottom-bar prop to true .

#Value

You can specify the minimum and maximum value that can be entered in input through min and max prop respectively.you can also specify the range by combining both

#Without Button

You can remove left and right buttons from number input by setting controls prop to false.You can still use the other properties on number input.

#Rounded

You can use the rounded variation of lv-number by setting rounded prop to true.

#Input Spinner Buttons

You can show the default input spinner buttons by setting showInputSpinner prop to true.

#Setup

You can import a component and register it as a local and global vue component as follows:

// import the component
import LvNumber from 'lightvue/number';
// Register the component locally
export default {
    components: {
        LvNumber
    }
}
// Register the component globally (Vue 2.x)
Vue.component('LvNumber', LvNumber);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvNumber', LvNumber);
app.mount('#app')
               

#APIs

All of the props, events and slots of the component are mentioned below:

Props
Type
Default
Description
value
String
Configures the value of the number.
controls
Boolean
Allows user to configure with the control of number component if the value is true.
iconRight
String
light-icon-plus
Configures the icon on the right.
iconLeft
String
light-icon-minus
Configures the icon on the left.
buttonColor
String
lv--secondary
Configures the color of the button.
max
Number
100
Configures the max value of the number component.
min
Number
0
Configures the min value of the number component.
step
Number
0
Defines the step to go up or down in the number component.
showInputSpinner
boolean
false
Allows user to configure default input spinner buttons when input type is set to number.
Events
Parameters
Description
input
value:  String
Configures the value of number field
update:modelValue
value:  String
alternative for v-model