Skip to main content

​
Usage

import { NumberInput } from '@kivora/react';

function Demo() {
  const [quantity, setQuantity] = useState(1);
  
  return (
    <NumberInput 
      label="Quantity" 
      value={quantity}
      onChange={setQuantity}
      min={0}
      max={99}
      step={1}
    />
  );
}

​
Props

​
value
number
Controlled value of the input.
​
defaultValue
number
default:"0"
Default value for uncontrolled mode.
​
onChange
(value: number) => void
Called when the value changes. Receives the numeric value.
​
min
number
Minimum allowed value. Decrements are disabled when reached.
​
max
number
Maximum allowed value. Increments are disabled when reached.
​
step
number
default:"1"
Amount to increment/decrement when using controls.
​
precision
number
default:"0"
Number of decimal places to display and round to.
​
label
string
Label text displayed above the input.
​
placeholder
string
Placeholder text when input is empty.
​
error
string
Error message to display below the input.
​
disabled
boolean
default:"false"
Disables the input and controls.
​
readOnly
boolean
default:"false"
Makes the input read-only (controls still work).
​
hideControls
boolean
default:"false"
Hides the increment/decrement buttons.
​
size
'sm' | 'md' | 'lg'
default:"'md'"
Size variant matching Input component sizes.
​
className
string
default:"''"
Additional CSS classes to apply to the input element.
​
id
string
HTML ID attribute. Auto-generated if not provided.

​
Examples

​
Basic Number Input

<NumberInput 
  label="Age" 
  min={0} 
  max={120} 
/>

​
With Step Controls

<NumberInput
  label="Price"
  min={0}
  step={0.01}
  precision={2}
  defaultValue={9.99}
/>

​
Without Controls

<NumberInput
  label="Quantity"
  hideControls
  min={1}
  max={999}
/>

​
Different Sizes

<NumberInput label="Small" size="sm" />
<NumberInput label="Medium" size="md" />
<NumberInput label="Large" size="lg" />

​
With Error State

function ValidatedInput() {
  const [value, setValue] = useState(0);
  
  return (
    <NumberInput
      label="Items"
      value={value}
      onChange={setValue}
      min={1}
      max={10}
      error={value < 1 ? 'Minimum quantity is 1' : undefined}
    />
  );
}

​
Decimal Precision

<NumberInput
  label="Temperature (°C)"
  step={0.1}
  precision={1}
  defaultValue={23.5}
/>

​
Controlled Cart Quantity

function CartItem() {
  const [qty, setQty] = useState(1);
  const price = 29.99;
  
  return (
    <div>
      <NumberInput
        label="Quantity"
        value={qty}
        onChange={setQty}
        min={1}
        max={10}
        size="sm"
      />
      <p>Total: ${(qty * price).toFixed(2)}</p>
    </div>
  );
}

​
Disabled and Read-Only

<NumberInput label="Disabled" disabled defaultValue={5} />
<NumberInput label="Read Only" readOnly value={10} />

​
Notes

  • Values are automatically clamped to min/max bounds
  • Precision controls decimal places via toFixed()
  • Increment (+) and decrement (−) buttons are visible by default
  • Controls disable when min/max limits are reached
  • Native HTML5 number input with hidden spinners
  • Manual input is validated and clamped on change
  • Focus ring appears on the entire control group
  • Controls have hover states for better UX

Build docs developers (and LLMs) love

Get started for freeTalk to us