Number Input

Number Input provides a numeric field with increment and decrement buttons for precise value entry, ideal for quantities, counts, and bounded numeric values.

Installation

npm install @libretexts/davis-react

Basic Usage

import { NumberInput } from '@libretexts/davis-react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(1);

  return (
    <NumberInput
      label="Quantity"
      value={value}
      onChange={setValue}
      min={1}
      max={99}
    />
  );
}

When to use

• Number Input — Use when users need to increment or decrement a bounded numeric value (quantities, seats, page count). The stepper buttons make it easy to adjust by 1.
• Input (type="number") — Use for unbounded or large numeric values where steppers would be impractical.