Number Input

Numeric input with increment/decrement controls and validation

Form Input
Stepper
Validation

Preview

Number input with various configurations

Range: 1 – 99

Min: 0

Range: 0 – 100

Features

  • Increment and decrement buttons
  • Direct text input with validation
  • Min/max value constraints with visual feedback
  • Custom step increments (integers or decimals)
  • Precision control for decimal places
  • Three sizes: small, medium, large
  • Disabled state support
  • Range display helper text

Installation

import { NumberInput } from '@/components/ui/number-input'

// Integer input
<NumberInput
  label="Quantity"
  value={quantity}
  onChange={setQuantity}
  min={1}
  max={99}
  step={1}
/>

// Decimal input with precision
<NumberInput
  label="Price (€)"
  value={price}
  onChange={setPrice}
  min={0}
  step={0.01}
  precision={2}
  size="lg"
/>