NumberField

NumberField renders a styled number input that emits a numeric value. Optional prepend and append strings can be displayed on the left and right sides of the input respectively (e.g. units or currency symbols). Decimal precision is controlled via decimalPlaces, which also drives the computed step.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | number | No | 0 | Current numeric value. | | onChange | (value: number) => void | Yes | — | Called with the new numeric value on every change. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | placeholder | string | No | — | Placeholder text for the input. | | decimalPlaces | number | No | 0 | Number of decimal places allowed. Controls the computed step when step is not provided. | | min | number | No | — | Minimum allowed value. | | max | number | No | — | Maximum allowed value. | | step | number | No | — | Manual step override. | | prepend | string | No | — | Text displayed to the left of the input (e.g. '$'). | | prependStyle | React.CSSProperties | No | — | Styles applied to the prepend span. | | append | string | No | — | Text displayed to the right of the input (e.g. 'kg'). | | appendStyle | React.CSSProperties | No | — | Styles applied to the append span. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputWrapperStyle | React.CSSProperties | No | — | Styles applied to the inner wrapper div. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the wrapper div. | | id | string | No | — | id attribute on the wrapper div. |

Usage

Basic

import React, { useState } from 'react';
import NumberField from '@/components/fields/NumberField';

export default function Example() {
  const [qty, setQty] = useState(0);

  return (
    <NumberField
      label="Quantity"
      value={qty}
      onChange={setQty}
      min={0}
    />
  );
}

With units and decimal precision

<NumberField
  label="Weight"
  value={weight}
  onChange={setWeight}
  decimalPlaces={2}
  append="kg"
  min={0}
  description="Enter weight in kilograms."
/>