Number Input

Forms
Input

Numeric input with increment/decrement controls, min/max constraints, and precision support. Ideal for quantity selectors, price inputs, and numeric settings.

Preview

Number input with stepper controls

Range: 1 – 99

Sizes

Three size options: sm, md, and lg

Small

Medium (default)

Large

Decimal Precision

Support for decimal values with configurable precision

Min: 0

Custom Step

Control step increments for different use cases

Range: 0 – 100

Range: 0 – 5

Disabled State

Number input in disabled state

Props

NumberInput component API reference

PropTypeDefaultDescription
valuenumber | string—Controlled value
defaultValuenumber0Initial value (uncontrolled)
onChange(value: number) => void—Callback when value changes
labelstring—Label text above the input
minnumber—Minimum allowed value
maxnumber—Maximum allowed value
stepnumber1Increment/decrement step
precisionnumber0Decimal places to display
size'sm' | 'md' | 'lg''md'Input size variant
disabledbooleanfalseDisable the input

Usage

Import and implementation example

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

export default function Example() {
  const [quantity, setQuantity] = useState(1)
  const [price, setPrice] = useState(9.99)

  return (
    <>
      {/* Basic integer input */}
      <NumberInput
        label="Quantity"
        value={quantity}
        onChange={setQuantity}
        min={1}
        max={99}
      />

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

      {/* Percentage with custom step */}
      <NumberInput
        label="Discount %"
        defaultValue={10}
        min={0}
        max={100}
        step={5}
        size="sm"
      />
    </>
  )
}

Features

Built-in functionality

  • Increment/decrement buttons: Click + or - to adjust value
  • Direct text input: Type values directly with validation
  • Min/max constraints: Enforce value boundaries
  • Custom step increments: Integer or decimal steps
  • Precision control: Configurable decimal places
  • Three sizes: Small, medium, and large variants
  • Range display: Shows min/max range helper text
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Input uses inputmode="decimal" for numeric keyboardButtons are properly labeledDisabled state on buttons at min/max

Keyboard Navigation

KeyAction
TabFocus input or buttons
TypeEnter numeric value directly
EnterActivate focused button

Notes

  • Buttons disable when at min/max limits
  • Invalid input reverts to default on blur
  • Visual feedback for disabled state
  • Label properly associated with input

Related Components

InputSliderForm Field