Currency Input
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The CurrencyInput component provides a specialized input field for monetary values with automatic formatting, currency symbols, and decimal handling. Built on top of the AdaptiveInput component.
Basic Usage
Different Currencies
With Icons
Properties
CurrencyInput
| Property | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The numeric value of the input. |
onValueChange | (value: number) => void | - | Callback fired when the value changes. Required. |
currencySymbol | string | "$" | Currency symbol to display. |
decimalSeparator | string | "." | Character used for decimal separation. |
thousandSeparator | string | "," | Character used for thousand separation. |
leftIcon | ReactNode | - | Icon to display on the left side. |
rightIcon | ReactNode | - | Icon to display on the right side. |
sizing | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Size of the input field. |
disabled | boolean | false | If true, the input is disabled. |
placeholder | string | - | Placeholder text for the input. |
className | string | - | Additional CSS classes. |
All other props from the AdaptiveInput component are also supported.
Features
Automatic Formatting
- Real-time currency formatting as you type
- Automatic thousand separators
- Fixed decimal places (2 digits)
- Currency symbol positioning
Numeric Input
- Only accepts numeric input
- Automatic decimal handling
- Cursor management for smooth editing
- Mobile-optimized numeric keyboard
Internationalization
- Customizable currency symbols
- Configurable decimal and thousand separators
- Support for different regional formats
Common Use Cases
The CurrencyInput component is perfect for:
- Financial forms - Salary, budget, expense inputs
- E-commerce - Product prices, shipping costs
- Banking applications - Transaction amounts, account balances
- Invoicing systems - Line items, totals, taxes
- Budget planners - Income, expenses, savings goals
- Payment forms - Donation amounts, subscription fees
- Accounting software - Financial data entry
Best Practices
- Use appropriate currency symbols - Match the user's locale or selection
- Validate ranges - Set minimum/maximum values where appropriate
- Handle edge cases - Consider zero values and very large numbers
- Provide clear labels - Indicate currency and purpose clearly
- Consider precision - Most currencies use 2 decimal places
- Test with different locales - Ensure formatting works globally
- Accessibility - Provide proper labels and descriptions