StorybookGitHub

Number Field

An input for entering a number, with increment and decrement controls.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/number-field.json

Usage

Use number field for quantity, currency, or other numeric inputs that benefit from stepper controls and built-in min/max/step clamping, instead of a plain Input with type="number".

<script setup lang="ts">
import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-field";
</script>

<template>
  <NumberField :default-value="1" :min="0" :max="10">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

Built on reka-ui's Number Field; supports v-model, disabled, and keyboard arrow/page-up/page-down stepping.