Vitral 0.2
Form

InputNumber

A number box with steppers, clamped to a range and formatted in the locale, as a decimal, a currency or a percentage.

WAI-ARIA tested

Import

main.ts
import { InputNumber } from '@vitral/vue';

Basic

Value: 3
<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const quantity = ref<number | null>(3);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="in-qty">Quantity</Label>        <InputNumber id="in-qty" v-model="quantity" :min="0" :max="99" placeholder="0" />        <small style="color: var(--vt-text-muted-color)">Value: {{ quantity ?? 'null' }}</small>    </StackPanel></template>

Formats

Currency, percent, a suffix and a fixed number of digits, each read back correctly when typed.

Value: 1299.9
Value: 49.99
Value: 0.8
Value: 12.5
<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const price = ref<number | null>(1299.9);const dollars = ref<number | null>(49.99);const opacity = ref<number | null>(0.8);const distance = ref<number | null>(12.5);</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-brl">Preço (pt-BR)</Label>            <InputNumber id="in-brl" v-model="price" mode="currency" currency="BRL" locale="pt-BR" />            <small style="color: var(--vt-text-muted-color)">Value: {{ price ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-usd">Price (en-US)</Label>            <InputNumber id="in-usd" v-model="dollars" mode="currency" currency="USD" locale="en-US" />            <small style="color: var(--vt-text-muted-color)">Value: {{ dollars ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-opacity">Opacity</Label>            <InputNumber id="in-opacity" v-model="opacity" mode="percent" :min="0" :max="1" :step="0.05" />            <small style="color: var(--vt-text-muted-color)">Value: {{ opacity ?? 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-distance">Distance</Label>            <InputNumber id="in-distance" v-model="distance" suffix=" km" :min-fraction-digits="1" :max-fraction-digits="1" :step="0.5" />            <small style="color: var(--vt-text-muted-color)">Value: {{ distance ?? 'null' }}</small>        </StackPanel>    </StackPanel></template>

Spin buttons

Stacked puts up over down at the end of the field; horizontal puts minus and plus either side. Hold a button to keep stepping.

<script setup lang="ts">import { InputNumber, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const rating = ref<number | null>(4);const width = ref<number | null>(320);</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-rating">Rating (stacked)</Label>            <InputNumber id="in-rating" v-model="rating" show-buttons :min="1" :max="5" />        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="in-width">Width (horizontal)</Label>            <InputNumber id="in-width" v-model="width" show-buttons button-layout="horizontal" :step="10" :min="0" suffix=" px" />        </StackPanel>    </StackPanel></template>

Sizes, variants and states

<script setup lang="ts">import { InputNumber } from '@vitral/vue';</script> <template>    <InputNumber :model-value="1" show-buttons size="small" aria-label="Small" />    <InputNumber :model-value="2" show-buttons aria-label="Normal" />    <InputNumber :model-value="3" show-buttons size="large" aria-label="Large" />    <InputNumber :model-value="4" variant="filled" aria-label="Filled" />    <InputNumber :model-value="5" invalid aria-label="Invalid" />    <InputNumber :model-value="6" show-buttons disabled aria-label="Disabled" />    <InputNumber :model-value="7" show-buttons readonly aria-label="Read only" /></template>

API

Read from packages/vue/src/components/InputNumber/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
minnumber—
maxnumber—
stepnumberWhat an arrow key or a spin button adds or takes away; PageUp/PageDown move ten of these. Defaults to 1.
mode'decimal' | 'currency' | 'percent'—
currencystringISO 4217 code, such as `BRL`; required by `mode: 'currency'`.
localestringA BCP 47 tag for the number format. Defaults to the Vitral locale's `code`.
minFractionDigitsnumber—
maxFractionDigitsnumber—
useGroupingbooleanThousands separators. Defaults to true.
prefixstringText before the number, such as `≈ `; it is part of the display, not of the value.
suffixstringText after the number, such as ` km`.
showButtonsbooleanSpin buttons.
buttonLayout'stacked' | 'horizontal'`stacked` puts up over down at the end of the field; `horizontal` puts minus before the number and plus after it.
allowEmptybooleanWhether clearing the text leaves the value empty (`null`). Defaults to true; when false, an emptied field goes back to its last value.
sizeSize—
variantInputVariantDefaults to the plugin's `inputVariant`.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
inputevent: InputNumberInputEventEvery edit, as typed or spun, before the value is committed on blur or Enter.
focusevent: FocusEvent—
blurevent: FocusEvent—

Used in these templates