Formatting
Numora formats numbers with thousand separators as the user types, preserving cursor position throughout.
Grouping styles
Standard: 1,234,567
Type a large number to see standard grouping
tsx
<NumoraInput thousandSeparator="," thousandStyle={ThousandStyle.Thousand} />Indian (Lakh): 12,34,567
Type a large number to see Indian numbering
tsx
<NumoraInput thousandSeparator="," thousandsStyle={ThousandStyle.Lakh} />Chinese (Wan): 123,4567
Type a large number to see Chinese numbering
tsx
<NumoraInput thousandSeparator="," thousandsGroupStyle={ThousandStyle.Wan} />None
Type a large number to see none grouping
tsx
<NumoraInput thousandSeparator="," thousandsGroupStyle={ThousandStyle.None} />When to format
Blur (default)
Type a number and click away to see formatting applied
tsx
<NumoraInput formatOn={FormatOn.Blur} thousandSeparator="," />Change
Formatting is applied on every keystroke
tsx
<NumoraInput formatOn={FormatOn.Change} thousandSeparator="," />Automatic behaviors
- Cursor preservation - the cursor stays in the correct position when separators are added or removed during formatting
- Separator skipping - backspace and delete automatically skip over thousand separators so they never need to be deleted manually