A number, typed or stepped — a quantity, a price, a count of minutes.
Import it from rei-kit:
import { NumberInput } from 'rei-kit'
Open NumberInput in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { NumberInput } from 'rei-kit'
const guests = ref<number | undefined>(2)
</script>
<template>
<NumberInput
v-model="guests"
label="Guests"
:min="1"
:max="12"
decrement-label="Fewer guests"
increment-label="More guests"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | |
min | number | -Infinity | |
max | number | Infinity | |
step | number | 1 | One press of a button or an arrow key. Its decimals set the rounding. |
decrementLabel | string | yes | Accessible name of the minus button, e.g. "Decrease". |
incrementLabel | string | yes | Accessible name of the plus button, e.g. "Increase". |
error | string | '' | |
hint | string | '' | |
size | 'sm' | 'md' | 'md' | |
labelHidden | boolean | false | |
disabled | boolean | false | |
fieldId | string | undefined | Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.