Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Amount

import {
  NumberField,
  NumberFieldDecrement,

Installation


pnpm dlx shadcn@latest add @reui/number-field

Usage

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"

<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Examples

Size

Small

import {
  NumberField,
  NumberFieldDecrement,

With Action Buttons

Large

import {
  NumberField,
  NumberFieldDecrement,

With Extended Message

Amount

import {
  NumberField,
  NumberFieldDecrement,

Kanban Phone Input

On This Page

Installation Usage Examples Size With Action Buttons With Extended Message