120k
New

Number Field

PreviousNext

A number field allows a user to enter a number and increment or decrement the value using stepper buttons.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/number-field

Usage

<script setup lang="ts">
import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-field"
</script>
 
<template>
  <NumberField :default-value="18" :min="0">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>