InputNumber

Number input component for entering and adjusting numeric values within a range, supporting increment/decrement buttons, range limits, and prefix/suffix.

Basic Usage

Basic number input with two-way data binding via v-model.

Current value: 0

<template>
  <u-input type="number" v-model="value" placeholder="Enter number"></u-input>
  <div>Current value: {{ value }}</div>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(0);
</script>

Value Range

Limit the input value range using min and max attributes.

Current value: 5

<template>
  <u-input type="number" v-model="value" :min="0" :max="10" placeholder="0 - 10"></u-input>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(5);
</script>

Sizes

Three sizes available: small, medium, large.

<template>
  <u-input type="number" size="small" v-model="value1" placeholder="Small"></u-input>
  <u-input type="number" size="medium" v-model="value2" placeholder="Medium"></u-input>
  <u-input type="number" size="large" v-model="value3" placeholder="Large"></u-input>
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(10);
  const value2 = ref(10);
  const value3 = ref(10);
</script>

Prefix & Suffix

Add prefix and suffix content via prefix and suffix attributes.

NO:

M

$

.00

<template>
  <u-input type="number" prefix="NO:" v-model="value1" placeholder="Number"></u-input>
  <u-input type="number" suffix="M" v-model="value2" placeholder="Amount"></u-input>
  <u-input type="number" prefix="$" suffix=".00" v-model="value3" placeholder="Price"></u-input>
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(1);
  const value2 = ref(100);
  const value3 = ref(99);
</script>

Disabled & Readonly

<template>
  <u-input type="number" disabled v-model="value1" placeholder="Disabled"></u-input>
  <u-input type="number" readonly v-model="value2" placeholder="Readonly"></u-input>
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(50);
  const value2 = ref(50);
</script>

API

Attribute	Description	Type	Default
modelValue	Binding value	number	0
type	Set to number	string	Required 'number'
placeholder	Placeholder text	string	-
min	Minimum value	number | string	-
max	Maximum value	number | string	-
step	Step increment	number | string	1
size	Input size	small | medium | large	medium
prefix	Prefix content	string	-
suffix	Suffix content	string	-
disabled	Whether disabled	boolean	false
readonly	Whether readonly	boolean	false