UIInputNumber

UIInputNumber

A numeric input component with increment/decrement controls.

<template>
  <UIInputNumber
    v-model:value="value"
    :min="0"
    :max="100"
    :step="1"
    :precision="2"
    :controls="true"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
const value = ref(0)

const handleChange = (value: number) => {
  console.log('Value changed:', value)
}
</script>

Props

• value (number): Input value
• min (number): Minimum value
• max (number): Maximum value
• step (number): Increment/decrement step
• precision (number): Decimal precision
• controls (boolean): Show increment/decrement controls
• disabled (boolean): Disable input
• readonly (boolean): Make input readonly
• size (‘small’ | ‘medium’ | ‘large’): Input size
• status (‘error’ | ‘warning’ | ‘success’): Input status
• placeholder (string): Placeholder text
• parser (function): Parse display value
• formatter (function): Format display value

Events

• update:value: Emitted when value changes
• change: Emitted when value is changed and blur
• focus: Emitted when input is focused
• blur: Emitted when input loses focus
• step-down: Emitted when decrement button is clicked
• step-up: Emitted when increment button is clicked