i need to create this input with eact styles - more like mobile sizing .
when i enter things the more number the smaller height of the input become when entering + automatically fomratting with ,.
I'll create a mobile-sized currency input component that automatically formats numbers with commas and adjusts the font size based on the input length, just like in the screenshots.
This component recreates the mobile money transfer interface from your screenshots with the following features:
- Dynamic Font Sizing: The text automatically gets smaller as you enter more digits
- Automatic Formatting: Numbers are formatted with commas as thousands separators
Visual Feedback:
- The amount turns green when valid
- Shows a red error message when exceeding the limit (1,000,000 GBP)
Mobile-Optimized UI:
- Dark theme matching the screenshots
- Currency selector with flag
- Recipient section below
The component uses a hidden input for handling the actual value while displaying a formatted version. The cursor indicator (green vertical line) shows where text input is happening.
To test it, simply click on the amount area and start typing numbers. You'll see the automatic formatting and font size adjustments in action.
is it ready?
Let me fix a few issues to make it fully functional:
Yes, it's ready now! The component is fully functional with:
✅ Working input - Click anywhere on the amount to start typing
✅ Dynamic font sizing - Text gets smaller as you add more digits
✅ Automatic comma formatting - Numbers format with thousands separators
✅ Error handling - Shows warning when exceeding 1,000,000 GBP
✅ Mobile-optimized design - Matches your screenshots exactly
✅ Animated cursor - Blinking cursor that scales with font size
Try clicking on the amount area and typing numbers to see all the features in action!