Ap-InputNumber

InputNumber is an input component to provide numerical input.

Example

    <apInputNumber v-model="exampleNumber" />

TIP

You can use v-model for bidirectionnal

Or use :modelValue and listen @update:modelValue

Props

Name	Type	Default	Required
modelValue	Number	null	false
size	'small', 'medium', 'large'	medium	false
step	Boolean	false	false
disable	Boolean	false	false
disabled	Boolean	false	false
prefix	String	null	false
suffix	String	null	false
min	Number	null	false
max	Number	null	false

Size

<template>
    <Ap-InputNumber size="small" v-model="refNumberSmall"/>
    <Ap-InputNumber v-model="refNumberMedium"/>
    <Ap-InputNumber size="large" v-model="refNumberLarge"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';

    const refNumberSmall = ref()
    const refNumberMedium = ref()
    const refNumberLarge = ref()
</script>

Step

    <apInputNumber v-model="exampleNumber" :step="0.1"/>

Prefix and Suffix

<apInputNumber v-model="value2" prefix="&#x21C5; " suffix="%" :min="0" :max="100" />