Eidetic

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