WtInputNumber

Props

v-model:

Prop: value

Event: input

Props:

Name	Required	Type	Default	Example code	Description
modelValue		Number	null	<wt-input-number v-model="value"></wt-input-number>	Input value (v-model)
label		String		<wt-input-number label="Quantity"></wt-input-number>	Input label
placeholder		String		<wt-input-number placeholder="Enter number"></wt-input-number>	Input placeholder
disabled		Boolean	false	<wt-input-number disabled></wt-input-number>	Disable input
required		Boolean	false	<wt-input-number required></wt-input-number>	Show required asterisk in label
min		Number		<wt-input-number :min="0"></wt-input-number>	Minimum value
max		Number		<wt-input-number :max="100"></wt-input-number>	Maximum value
step		Number	1	<wt-input-number :step="1"></wt-input-number>	Step increment/decrement value
minFractionDigits		Number		<wt-input-number :min-fraction-digits="2"></wt-input-number>	Minimum number of decimal digits
maxFractionDigits		Number		<wt-input-number :max-fraction-digits="2"></wt-input-number>	Maximum number of decimal digits
showButtons		Boolean	false	<wt-input-number show-buttons></wt-input-number>	Show increment/decrement buttons

Events:

Name	Params	Description
update:modelValue	[ { "name": "value", "type": "Number" } ]	Emitted when input value changes

Slots:

Name	Scope	Description
label	[ { "name": "label" } ]	Custom label slot
prefix		Prefix content for input group (currency symbol, etc.)
suffix		Suffix content for input group (unit label, etc.)

Basic Input Number

Quantity

Code

<script setup>
import { ref } from 'vue';

const value = ref(10);
</script>

<template>
  <wt-input-number
    v-model="value"
    label="Quantity"
    :min="0"
    :max="100"
    :step="1"
  />
</template>

<style scoped lang="scss"></style>

Input Number with Buttons

Count

Code

<script setup>
import { ref } from 'vue';

const value = ref(0);
</script>

<template>
  <wt-input-number
    v-model="value"
    label="Count"
    show-buttons
    :min="0"
    :max="100"
  />
</template>

<style scoped lang="scss"></style>

Input Number with Currency Prefix

Price

$

Code

<script setup>
import { ref } from 'vue';

const price = ref(99.99);
</script>

<template>
  <wt-input-number
    v-model="price"
    label="Price"
    :min="0"
    :step="0.01"
    :min-fraction-digits="2"
    :max-fraction-digits="2"
  >
    <template #prefix>
      $
    </template>
  </wt-input-number>
</template>

<style scoped lang="scss"></style>