AmountInput
A specialized input component for handling numeric amounts with proper formatting.
AmountInput
The AmountInput component provides a specialized input field for handling numeric amounts with automatic formatting and validation.
Usage
import { AmountInput } from '@avalabs/builderkit';
import { DollarSign } from 'lucide-react';
// Basic usage
<AmountInput
type="text"
placeholder="Enter amount..."
onChange={(value) => console.log('Amount:', value)}
/>
// With currency icon
<AmountInput
type="text"
placeholder="0.00"
icon={<DollarSign className="w-4 h-4" />}
onChange={handleAmountChange}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | - | Input type (usually "text") |
placeholder | string | - | Placeholder text |
value | string | "" | Controlled input value |
disabled | boolean | false | Whether the input is disabled |
icon | ReactNode | - | Optional icon element |
onChange | (value: string) => void | - | Called with formatted amount |
className | string | - | Additional CSS classes |
Features
- Automatic number formatting
- Prevents invalid number inputs
- Handles decimal points appropriately
- Optional icon support
- Controlled value management
- Background color inheritance
Examples
Basic Amount Input
<AmountInput
type="text"
placeholder="0.00"
onChange={setAmount}
/>With Maximum Value
<AmountInput
type="text"
placeholder="Enter amount"
value={amount}
onChange={(value) => {
if (parseFloat(value) <= maxAmount) {
setAmount(value);
}
}}
/>With Currency Symbol
<AmountInput
type="text"
placeholder="0.00"
icon={<span className="text-gray-400">$</span>}
onChange={handleAmount}
className="text-right"
/>In a Form
<form onSubmit={handleSubmit}>
<AmountInput
type="text"
placeholder="Amount to send"
value={amount}
onChange={setAmount}
className="mb-4"
/>
<button
type="submit"
disabled={!amount || parseFloat(amount) <= 0}
>
Send
</button>
</form>Number Formatting
The component uses parseNumberInput utility to:
- Allow only numeric input
- Handle decimal points
- Remove leading zeros
- Maintain proper number format
Last updated on 3/10/2025