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

AmountInput

On this page