svelte-number-format

Svelte Number Format is a custom input component for Svelte 5. It ensures that a user can only enter text that meets specific numeric or string patterns, and formats the input value for display.

Usage

Install with npm or yarn:

npm install --save svelte-number-format

Props

| Prop | Type | Description | | ------------------- | ------------------------------------------ | --------------------------------------------------------------------- | | value | string \| number | Initial value to display. | | format | string | Custom number format (e.g., #,###.##). | | mask | string | Input mask (e.g., "(###) ###-####"). | | decimalSeparator | string | Character for the decimal separator (default: .). | | thousandSeparator | string | Character for the thousand separator (default: ,). | | onInput | (formatted: string, raw: string) => void | Callback function invoked with the formatted and raw values on input. |

Example

<script>
	import { NumberFormat } from 'svelte-number-format'

	let formattedValue = ''
	let rawValue = ''
</script>

<NumberFormat
	value={1234567.89}
	format="#,###.##"
	decimalSeparator="."
	thousandSeparator=","
	onInput={(formatted, raw) => {
		formattedValue = formatted
		rawValue = raw
	}}
/>

<p>Formatted: {formattedValue}</p>
<p>Raw: {rawValue}</p>

License

MIT © Pitis Radu