Value Types

Numora always works with strings. e.target.value in onChange is always the raw numeric string - separators stripped, ready to parse or store. The formatted display string lives in e.target.formattedValue.

e.target.value - raw numeric string

onChange fires a NumoraInputChangeEvent (structurally compatible with React's ChangeEvent<HTMLInputElement>). e.target.value returns the raw numeric string - separators removed - so you can pass it directly to a form library or state setter without post-processing.

import { NumoraInput } from 'numora-react'

<NumoraInput
  thousandSeparator=","
  maxDecimals={2}
  onChange={(e) => {
    console.log(e.target.value) // "1234.56" - no separators
  }}
/>

e.target.formattedValue - formatted display string

The formatted value (with separators) is available as e.target.formattedValue via the typed NumoraHTMLInputElement export. This is the same string visible in the input.

import { NumoraInput, type NumoraHTMLInputElement } from 'numora-react'

<NumoraInput
  thousandSeparator=","
  maxDecimals={2}
  onChange={(e) => {
    console.log(e.target.value)                                   // "1234.56" - raw
    console.log((e.target as NumoraHTMLInputElement).formattedValue) // "1,234.56" - formatted
  }}
/>

Reading the formatted value via ref

You can also read the formatted value at any time via a ref - useful when you need it outside of an onChange handler:

import { useRef } from 'react'
import { NumoraInput, type NumoraHTMLInputElement } from 'numora-react'

function App() {
  const ref = useRef<HTMLInputElement>(null)

  return (
    <NumoraInput
      ref={ref}
      thousandSeparator=","
      maxDecimals={2}
      onChange={() => {
        console.log((ref.current as NumoraHTMLInputElement).formattedValue) // "1,234.56"
      }}
    />
  )
}

valueAsNumber

Need a number? Access valueAsNumber via a ref. It strips separators and calls parseFloat internally.

import { useRef } from 'react'
import { NumoraInput } from 'numora-react'

function App() {
  const ref = useRef<HTMLInputElement>(null)

  const handleSubmit = () => {
    console.log((ref.current as any).valueAsNumber) // 1234.56
  }

  return <NumoraInput ref={ref} thousandSeparator="," maxDecimals={2} />
}

Precision warning: parseFloat is subject to IEEE 754 limits. Integers above Number.MAX_SAFE_INTEGER and long decimals may silently lose precision. For financial arithmetic, use the string from e.target.value with a decimal library such as decimal.js.