Number input

VNumberInput is a field for a number, with step buttons, the keyboard of a spinbutton and formatting in the locale.

Usage

vue

Quantity

Between 1 and 10.

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const quantity = ref<number | null>(1)
</script>

<template>
  <VNumberInput
    v-model="quantity"
    class="field"
    label="Quantity"
    hint="Between 1 and 10."
    :min="1"
    :max="10"
  />
</template>

<style scoped>
.field {
  max-inline-size: 15rem;
}
</style>

Examples

Controls

controls places the step buttons on either side, stacks them at the end, or removes them. They stay out of the Tab order: the arrow keys step from the field.

vue

Guests

Rooms

Nights

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const guests = ref<number | null>(2)
const rooms = ref<number | null>(1)
const nights = ref<number | null>(3)
</script>

<template>
  <div class="stack">
    <VNumberInput v-model="guests" label="Guests" controls="split" :min="1" />
    <VNumberInput v-model="rooms" label="Rooms" controls="stacked" :min="1" />
    <VNumberInput v-model="nights" label="Nights" controls="none" :min="1" />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-4);
  max-inline-size: 15rem;
}
</style>

Formatting

formatOptions takes the options of Intl.NumberFormat. The value is formatted outside editing and shown bare while it is typed. With style: 'percent', 0.15 is shown and typed as 15.

vue

Price

Discount

Distance

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const price = ref<number | null>(1249.9)
const discount = ref<number | null>(0.15)
const distance = ref<number | null>(42.195)
</script>

<template>
  <div class="stack">
    <VNumberInput
      v-model="price"
      label="Price"
      :min="0"
      :step="10"
      :format-options="{ style: 'currency', currency: 'EUR' }"
    />
    <VNumberInput
      v-model="discount"
      label="Discount"
      :min="0"
      :max="1"
      :step="0.05"
      :format-options="{ style: 'percent' }"
    />
    <VNumberInput
      v-model="distance"
      label="Distance"
      controls="none"
      :format-options="{ style: 'unit', unit: 'kilometer', maximumFractionDigits: 3 }"
    />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-4);
  max-inline-size: 15rem;
}
</style>

Step

step sets how far the arrow keys and the buttons move the value, on a grid starting at min. Fractional steps do not drift.

vue

Weight

Page Up and Page Down move ten steps.

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const weight = ref<number | null>(0.5)
</script>

<template>
  <VNumberInput
    v-model="weight"
    class="field"
    label="Weight"
    hint="Page Up and Page Down move ten steps."
    :min="0"
    :max="20"
    :step="0.5"
    :format-options="{ style: 'unit', unit: 'kilogram' }"
  />
</template>

<style scoped>
.field {
  max-inline-size: 15rem;
}
</style>

API

Props

Prop	Type	Default
`min`	`number`	none
Smallest value. A lower typed value is raised to it when committed.
`max`	`number`	none
Largest value. A higher typed value is lowered to it when committed.
`step`	`number`	`1`
Distance moved by the arrow keys and the buttons. Page Up and Page Down move ten steps.
`formatOptions`	`Intl.NumberFormatOptions`	none
`Intl.NumberFormat` options for the displayed value: currency, unit, percent or decimals.
`locale`	`string`	none
Locale used to format and read the number. Defaults to the library locale.
`controls`	`NumberInputControls'split' \| 'stacked' \| 'none'`	`'split'`
Position of the step buttons.
`incrementLabel`	`string`	none
Accessible name of the plus button. Defaults to the library dictionary.
`decrementLabel`	`string`	none
Accessible name of the minus button. Defaults to the library dictionary.
`size`	`InputSize'sm' \| 'md' \| 'lg'`	`'md'`
Field size. Overridden when `VInputGroup` sets `size`.
`compact`	`boolean`	`false`
Reduces the height without changing padding or text. Overridden when `VInputGroup` sets `compact`.
`label`	`string`	none
Visible label linked to the input. When omitted, provide `aria-label` or `aria-labelledby`.
`hint`	`string`	none
Help text below the field, linked through `aria-describedby`.
`error`	`string`	none
Error message shown in place of the hint. Sets `aria-invalid` and is announced when it appears.
`invalid`	`boolean`	`false`
Sets `aria-invalid` and the error style.
`disabled`	`boolean`	`false`
Disables the field and its buttons.
`readonly`	`boolean`	`false`
Prevents typing and stepping while allowing focus and copying.
`clearable`	`boolean`	`false`
Adds a clear button that sets the value to `null`.
`clearLabel`	`string`	none
Accessible name of the clear button. Defaults to the library dictionary.
`loading`	`boolean`	`false`
Shows a spinner at the end of the field.
`loadingText`	`string`	none
Accessible spinner text. Defaults to the library dictionary.
`v-model`	`number \| null`	`null`
Field value, a number, or `null` when empty. Typed text is committed on blur and on Enter.

Events

Event	Type
`clear`	`[]`
Emitted after the clear button sets the value to `null`.