Leaf UI
  • English

      • InputNumber

      Enter numeric values such as quantities or prices.

      Basic usage

      Live previewBasic usage

      Current quantity: 3

      basic.tsx
      import { InputNumber } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function InputNumberBasic() {
  const [value, setValue] = useState<number | null>(3);
  return (
    <div className="leaf-demo-stack">
      <div className="leaf-demo-field">
        <label htmlFor="number-quantity">Quantity</label>
        <InputNumber
          id="number-quantity"
          name="quantity"
          min={0}
          max={20}
          value={value}
          onChange={setValue}
        />
      </div>
      <div className="leaf-demo-field">
        <label htmlFor="number-price">Price</label>
        <InputNumber
          id="number-price"
          min={0}
          step={0.1}
          precision={2}
          defaultValue={19.9}
          prefix="¥"
        />
      </div>
      <InputNumber
        aria-label="Percentage"
        defaultValue={50}
        min={0}
        max={100}
        suffix="%"
        controls={false}
      />
      <div className="leaf-demo-row">
        <InputNumber aria-label="Read only" defaultValue={12} readOnly />
        <InputNumber aria-label="Disabled" defaultValue={8} disabled />
      </div>
      <p className="leaf-demo-note">Current quantity: {value ?? 'Empty'}</p>
    </div>
  );
}

      InputNumber API

      PropTypeDefaultDescription
      value / defaultValuenumber | nullnullControlled / initial value; null is empty
      onChange(value: number | null) => void—Called for a valid number or clearing
      min / maxnumberUnboundedAllowed number range
      stepnumber1Increment and decrement step
      precisionnumber—Decimal precision, from 0 to 15
      controlsbooleantrueShow increment and decrement buttons
      keyboardbooleantrueSupport arrow key increments
      size'sm' | 'md' | 'lg''md'Control size
      status'error' | 'warning'—Validation status
      prefix / suffixReactNode—Leading / trailing decoration
      disabled / readOnlybooleanfalseDisable / read only
      refRef<HTMLInputElement>—Input element ref

      Types

      Import the component props and item types when preparing your own values.

      import type { InputNumberProps } from '@sudden3/leaf-ui';

      Usage notes

      Partial minus signs and decimal points are preserved during typing. Blur or Enter normalizes the range and precision; stepping avoids common decimal accumulation errors. Use name for FormData submission. required, form and autoComplete reach the input, and form reset is supported. className and style apply to the wrapper.