Currency Input

Example Usage

Enter a dollar amount

<script>
  import { CurrencyInput } from "@fanny-pack-ui/svelte-kit";

  let amount = 0;
</script>

<div style="margin-bottom:20px">
  <CurrencyInput
    bind:value={amount}
    valAlign="right"
    locale={locale}
    currency={currency}
    label="Enter a dollar amount"
    labelAlign="right"
    padding="var(--input-default-padding)"
    fontSize="var(--input-default-font-size)"
    placeholder="Type right here"
    disabled={false}
  />
</div>

Return Value Demo

Currency Input Components

$0.00

Return Value

NOTE: The Return Value example above shows the value that is returned from this component. This is the value that you would use to run calculations or that you would send to the backend for processing or to store in a database. This value is a number data type.

Custom Input Style Props

The original intention for these custom styles was to set --custom-input-bg-color="transparent" so the <CurrencyInput> field would blend into the background. A few extra custom style rules have been provided for even more customizability.

You can set the following custom variables:

--custom-input-bg-color
--custom-input-border-color
--custom-input-text-color
--custom-input-placeholder-text-color

<div style="margin:20px 0">
  <CurrencyInput
    bind:value={amount}
    placeholder="Enter an amount"
    --custom-input-bg-color="pink"
    --custom-input-border-color="darkred"
    --custom-input-text-color="darkred"
    --custom-input-placeholder-text-color="var(--neutral-7)"
  />
</div>

Props

Prop name	Type	Possible values	Default value	Description
`label` (optional)	`string`	Any string	`""` (an empty string)	This prop will provide a label for the input field. If nothing is passed to this prop, then no label will be displayed.
`labelAlign`	`string`	`left`, `right`	`right`	This prop will align the label for the input field either to left or the right side of the input field.
`bind:value`	`number`	any number	`0`	This component’s `value` prop needs to be bound to a variable that has a `number` data type. It is important to understand that the data type of `value` is `number` (not `string`). In other words, the variable that is bound to the `value` prop is a `number` and it is simply formatted as a `string` using the Internationalization API before it is displayed in the browser. That also means that when you store the value that is bound to the `value` prop (e.g. in a database), the data type of that value will be `number` (not `string`). JavaScript’s `number` data type automatically removes any insignificant trailing zeros after the decimal point. So if you are trying to store a number like `10.0`, `10.00`, `10.50`, or `10.550`, JavaScript will remove the insignificant zeros from the end of those numbers and return `10`, `10`, `10.5`, and `10.55`, respectively. So when storing these values in a database, it might be best to store them as floating point numbers (e.g. `doubles`) in order to handle both integers and floats.
`valAlign`	`string`	`left`, `right`	`right`	This prop will align the value in the input field either to left or the right side of the input field.
`locale`	`string`	Any locale identifier string. See Intl.Locale for more details.	`en-US`	This prop is the locale identifier string that will format the currency value to the correct format.
`currency`	`string`	Any acceptable currency string. See Intl.NumberFormat() constructor for more details.	`USD`	This prop is the currency to use in currency formatting.
`padding`	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--input-default-padding)`	This prop will set the padding for the input field. The default value can be changed in the `theme.css` file.
`fontSize`	`string`	Any CSS font size value or CSS font size variable from your `theme.css` file.	`var(--input-default-font-size)`	This prop will set the font size for the input field. The default value can be changed in the `theme.css` file.
`placeholder` (optional)	`string`	Any string	NA	This prop will act as the placeholder when the input field is empty.
`disabled`	`boolean`	`true`, `false`	`false`	This prop will disable the input field.

Event Forwarding

Event	Description
`on:change`	This component forwards the `change` event, so you can call an event handler when a user changes the value in the input field and then the input field loses focus.
`on:input`	This component forwards the `input` event, so you can call an event handler when a user enters a value into the input field.
`on:blur`	This component dispatches a custom `blur` event rather than forwarding the `blur` DOM event. This is because the `blur` event is used internally in this component so the `blur` event cannot be forwarded. The main difference when listening for and handling the `blur` event in this component is that, since the `blur` event is dispatched, you will find the `blur` event on the `event.detail` object rather than the `event` object. For example: `function handlerFunction(event) {` `console.log("Blur Event:", event.detail)};` `}` `<CurrencyInput on:blur={handlerFunction} />`