Form
InputCurrency
Storybook
InputCurrency
Storybook
It is a text input component that allows the user to enter monetary values into a form.
Import
1import { InputCurrency } from 'dd360-ds'1import InputCurrency from 'dd360-ds/InputCurrency'Usage
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency defaultValue='0.00' />placeholder
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency placeholder='100' />value
The current value of the InputCurrency component. This value can be updated in real time based on user input.
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency value={10.3} />defaultValue
The default value of the InputCurrency component when the page loads.
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency defaultValue={10.3} />decimalsLimit
The maximum number of decimals allowed in the input value. The default value is 2.
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency decimalsLimit={1} defaultValue='0.0' />decimalScale
The number of decimal places to display in the output value. If set to null, decimalsLimit will be used. If decimalsLimit is also null, 2 decimals will be displayed.
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency decimalScale={3} defaultValue='0.00' />Prefix
The prefix to be displayed in the output value.
1import { InputCurrency } from 'dd360-ds'
2
3<InputCurrency prefix='$' defaultValue='0.00' />API Reference
| Name | Types | Default |
|---|---|---|
| "value" | string number | - |
| "defaultValue" | number | - |
| "decimalsLimit" | number | 2 |
| "decimalScale" | number | - |
| "onBlurInput" | (() => void) | - |
| "onFocus" | ((e: FocusEvent<HTMLInputElement>) => void) | - |
| "onChange" | ((value: string, name: string) => void) | - |
| "onPaste" | ClipboardEventHandler<HTMLInputElement> | - |
| "prefix" | string | - |
| "suffix" | string | - |
| "disabled" | boolean | false |
| "name" | string | - |
| "placeholder" | string | - |
| "className" | string | - |
| "role" | string | - |