v2.0.6

Currency Input

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/currency-input

npm @spark-web/currency-input

Source GitHub.com

Bundle unpkg.com

Currency input provides a way for inputting money values. Note that this component is similar to the FloatInput component with the difference that this component has 2 fraction digits enforced and a currency symbol starting adornment.

Examples

Example controlled

The current value is: 1000

Open in Playroom

const [value, setValue] = React.useState(1000);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <CurrencyInput value={value} onChange={v => setValue(v)} />
    </Field>
    <Text>The current value is: {value}</Text>
  </Stack>
);

const [value, setValue] = React.useState(1000);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <CurrencyInput value={value} onChange={v => setValue(v)} />
    </Field>
    <Text>The current value is: {value}</Text>
  </Stack>
);

Currency Symbol Adornment

You can specify what currency type you'd like for the currency symbol adornment at the start of the input component. If unspecified, the currency symbol adornment will default to AUD. Note that the currency codes are references to the respective currency's ISO 4217 currency codes.

Currency symbols

€

￥

₩

Open in Playroom

<Stack gap="large">
  <Field label="Currency symbols">
    <CurrencyInput currencyType="EUR" />
    <CurrencyInput currencyType="RMB" />
    <CurrencyInput currencyType="KRW" />
  </Field>
</Stack>

<Stack gap="large">
  <Field label="Currency symbols">
    <CurrencyInput currencyType="EUR" />
    <CurrencyInput currencyType="RMB" />
    <CurrencyInput currencyType="KRW" />
  </Field>
</Stack>

Prop	Type	Description
children?	AdornmentsAsChildren: ReactElement<InputAdornmentProps, string \| JSXElementConstructor<any>> \| [ReactElement<InputAdornmentProps, string \| JSXElementConstructor<any>>, ReactElement<InputAdornmentProps, string \| JSXElementConstructor<...>>]	Adorn the input with ornamental element(s) to aid user input, or interactive element(s) to augment user input. Each child must be wrapped with the `InputAdornment` component to ensure proper layout, otherwise it will not be rendered.
currencyType?	"BOV" \| "CHE" \| "CHF" \| "CHW" \| "CLF" \| "COU" \| "MAD" \| "MXV" \| "UYI" \| "UYW" \| "XUA" \| "AED" \| "AFN" \| "ALL" \| "AMD" \| "ANG" \| "AOA" \| "ARS" \| "AUD" \| "AWG" \| "AZN" \| "BAM" \| "BBD" \| ... 162 more ... \| "ZWL"	Specifies what currency symbol you want as a starting adornment to the component.
data?	DataAttributeMap	Sets data attributes on the component. Sets data attributes for the element.
onChange?	(value: string \| number) => void
value?	string \| number

Note that CurrencyInput also extends FloatInput's props and are not listed here.