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.

<template lang="html">
  <div class="centerx">
    <vs-input-number v-model="number"/>
    <vs-input-number :disabled="true" v-model="number1"/>
    <vs-input-number :is-disabled="true" v-model="number2"/>
    <vs-input-number v-model="number3" icon-inc="expand_less" icon-dec="expand_more"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number:34,
      number1:48,
      number2:50,
      number3:55,
    }
  }
}
</script>

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.

:::warning Only RGB and HEX colors are supported. :::

<template lang="html">
  <div class="centerx">
    <vs-input-number color="danger" v-model="number1"/>
    <vs-input-number color="success" v-model="number2"/>
    <vs-input-number color="warning" v-model="number3"/>
    <vs-input-number color="dark" v-model="number4"/>
    <vs-input-number color="rgb(218, 24, 94)" v-model="number5"/>
    <vs-input-number color="#ad3af9" v-model="number6"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number1:196,
      number2:88,
      number3:25,
      number4:12,
      number5:590,
      number6:32,
    }
  }
}
</script>

Min - Max

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

<template lang="html">
  <div class="centerx">
    <vs-input-number min="13" max="21" v-model="number1"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number1:21,
    }
  }
}
</script>

Size

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

<template lang="html">
  <div class="centerx">
    <vs-input-number v-model="number0"/>
    <vs-input-number size="medium" v-model="number1"/>
    <vs-input-number size="small" v-model="number2"/>
    <vs-input-number size="mini" v-model="number3"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number0:95,
      number1:21,
      number2:67,
      number3:2
    }
  }
}
</script>

Step

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

<template lang="html">
  <div class="centerx">
    <vs-input-number v-model="number0" :step="5"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number0:5
    }
  }
}
</script>

Decimal

Number Input also supports decimal values.

<template lang="html">
  <div class="centerx">
    <vs-input-number v-model="number0" :step="1.43"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number0:1.98
    }
  }
}
</script>

Label

Number Input supports adding labels for number inputs.

passengers:

<template lang="html">
  <div class="centerx">
    <vs-input-number v-model="number0" label="passengers:"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      number0:1
    }
  }
}
</script>