finance
MoneyInput
Example
$CAD
$CAD
Import
import { MoneyInput } from '@connor-adams/designsystem'Usage
A currency amount field for adding/editing transactions and setting budgets. Pass direction + onDirectionChange to show the in/out toggle.
const [amt, setAmt] = React.useState(84.2)
const [dir, setDir] = React.useState('out')
<MoneyInput value={amt} onValueChange={setAmt} direction={dir} onDirectionChange={setDir} currency="CAD" />
Props: currency, locale, direction/onDirectionChange (toggle), size="sm|default", invalid, disabled. For display-only amounts use AmountText.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | undefined | — | |
| defaultValue | string | number | undefined | ||
| onValueChange | ((value: number | null, raw: string) => void) | undefined | — | |
| currency | string | undefined | CAD | |
| locale | string | undefined | en-CA | |
| direction | "in" | "out" | undefined | — | |
| onDirectionChange | ((direction: "in" | "out") => void) | undefined | — | |
| disabled | boolean | undefined | — | |
| invalid | boolean | undefined | — | |
| size | "sm" | "default" | undefined | default | |
| placeholder | string | undefined | 0.00 |