Skip to main content

Numeric Field

A specialized input field component for handling numeric values with internationalization support, decimal formatting, and keyboard input validation.

Features​

  • Internationalization: Supports different locales for number formatting
  • Decimal Control: Configurable minimum and maximum decimal places (default: 0/0 for integer-only input)
  • Keyboard Validation: Prevents invalid characters and enforces decimal limits
  • Focus Behavior: Shows raw input while focused, formatted display when blurred
  • Right-aligned Text: Optimized for numeric input display

Basic Usage​

Default Numeric Field​

function BasicExample() {
  const [value, setValue] = useState(0);

  return (
    <NumericField
      label="Amount"
      value={value}
      onChange={(event, numericValue) => {
        setValue(numericValue);
        console.log('Numeric value:', numericValue);
      }}
    />
  );
}

With Initial Value​

<NumericField
  label="Price"
  value={1234.56}
  intl={{
    minimumFractionDigits: 0,
    maximumFractionDigits: 2
  }}
  onChange={(event, numericValue) => console.log(numericValue)}
/>

Negative Values​

<NumericField
  label="Balance"
  value={-500.75}
  intl={{
    minimumFractionDigits: 0,
    maximumFractionDigits: 2
  }}
  onChange={(event, numericValue) => console.log(numericValue)}
/>

Internationalization​

French Locale (Default)​

<NumericField
  label="Montant"
  locale="fr-FR"
  value={1234.56}
  intl={{ maximumFractionDigits: 2 }}
/>

US Locale​

<NumericField
  label="Amount"
  locale="en-US"
  value={1234.56}
  intl={{ maximumFractionDigits: 2 }}
/>

Decimal Places Configuration​

Fixed Decimal Places​

<NumericField
  label="Currency"
  intl={{
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }}
  value={100}
/>

No Decimal Places (Default)​

Note: The default values for minimumFractionDigits and maximumFractionDigits intl options are both 0, so decimal separators (. and ,) are disabled by default. This is perfect for integer-only fields like quantities, IDs, or counts.

<NumericField
  label="Quantity"
  value={42}
/>

Up to 4 Decimal Places​

<NumericField
  label="Precision Value"
  intl={{
    minimumFractionDigits: 0,
    maximumFractionDigits: 4
  }}
  value={3.14159}
/>

Form Integration​

Controlled Component​

function FormExample() {
  const [formData, setFormData] = useState({
    price: 0,
    quantity: 0,
    discount: 0
  });

  const handleNumericChange = (field) => (event, numericValue) => {
    setFormData(prev => ({
      ...prev,
      [field]: numericValue
    }));
  };

  return (
    <form>
      <NumericField
        label="Price"
        value={formData.price}
        onChange={handleNumericChange('price')}
        intl={{
          style: 'currency',
          currency: 'EUR',
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }}
        required
      />
      <NumericField
        label="Quantity"
        value={formData.quantity}
        onChange={handleNumericChange('quantity')}
        intl={{ minimumFractionDigits: 0, maximumFractionDigits: 0 }}
      />
      <NumericField
        label="Discount %"
        value={formData.discount}
        onChange={handleNumericChange('discount')}
        intl={{
          style: 'percent',
          customPercent: true
        }}
      />
    </form>
  );
}

Error States​

With Error​

<NumericField
  label="Amount"
  error
  helperText="Please enter a valid amount"
  value={-100}
/>

Please enter a valid amount

Disabled State​

<NumericField
  label="Read Only Value"
  disabled
  value={999.99}
  intl={{
    minimumFractionDigits: 0,
    maximumFractionDigits: 2
  }}
/>

Advanced Use Cases​

Currency Input​

<NumericField
  label="Price (€)"
  intl={{
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }}
  value={1234.56}
/>

Percentage Input (Standard)​

<NumericField
  label="Tax Rate"
  intl={{
    style: 'percent',
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
  }}
  value={0.15}
/>

Custom Percentage Input (Raw Decimal Display)​

<NumericField
  label="Tax Rate"
  intl={{
    style: 'percent',
    customPercent: true,
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
  }}
  value={0.5}
/>

Note: The customPercent: true option allows you to display raw decimal values with the % symbol. This is useful when you want to show 0.5% instead of the standard 50% that style: 'percent' would normally display.

Scientific Notation​

<NumericField
  label="Scientific Value"
  intl={{
    notation: 'scientific',
    maximumFractionDigits: 3
  }}
  value={1.23e6}
/>

Keyboard Behavior​

The NumericField component provides intelligent keyboard input handling:

  • Digits (0-9): Always allowed
  • Decimal separators: Only one . or , allowed only if maximumFractionDigits is greater than 0
  • Negative sign: Only at the beginning
  • Navigation keys: Arrow keys, Home, End, Tab, etc. are allowed
  • Action keys: Backspace, Delete, Enter, Escape are allowed
  • Decimal limits: Enforces maximum decimal places as configured
  • Minimum decimals Enforce minimum decimal default values

Props​

NameTypeRequiredDefaultDescription
localeIntl.LocalesArgumentNo'fr-FR'Locale for number formatting
intlIntl.NumberFormatOptions & { customPercent?: boolean }No{ minimumFractionDigits: 0, maximumFractionDigits: 0 }Internationalization options for number formatting - see mdn doc. Use customPercent: true with style: 'percent' to display raw decimal values (e.g., 0.5% instead of 50%)
onChange(event: ChangeEvent<HTMLInputElement>, numericValue: number) => voidNo-Callback fired when the value changes
valuestring | numberNo-The value of the input
onFocus(event: FocusEvent<HTMLInputElement>) => voidNo-Callback fired when the input is focused
onBlur(event: FocusEvent<HTMLInputElement>) => voidNo-Callback fired when the input is blurred
onKeyDown(event: KeyboardEvent<HTMLDivElement>) => voidNo-Callback fired when a key is pressed
...propsTextFieldPropsNo-All other Material-UI TextField props - see mui doc