AddressInput

The AddressInput component provides a specialized input field for Ethereum addresses with real-time validation.

Usage

import { AddressInput } from '@avalabs/builderkit';
import { Wallet } from 'lucide-react';
 
// Basic usage
<AddressInput 
  placeholder="Enter address..."
  onChange={(address) => console.log('Valid address:', address)}
/>
 
// With icon
<AddressInput 
  placeholder="Recipient address"
  icon={<Wallet className="w-4 h-4" />}
  onChange={handleAddressChange}
/>

Props

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text
`value`	`string`	`""`	Controlled input value
`disabled`	`boolean`	`false`	Whether the input is disabled
`icon`	`ReactNode`	-	Optional icon element
`onChange`	`(address: string) => void`	-	Called with valid address or empty string
`className`	`string`	-	Additional CSS classes

Features

Real-time Ethereum address validation using viem
Visual feedback for invalid addresses
Only emits valid addresses through onChange
Optional icon support
Controlled value management
Error state styling

Examples

Basic Address Input

<AddressInput 
  placeholder="Enter Ethereum address"
  onChange={setRecipientAddress}
/>

With Error Handling

<AddressInput 
  placeholder="Recipient address"
  onChange={(address) => {
    if (address) {
      handleValidAddress(address);
    } else {
      setError('Please enter a valid address');
    }
  }}
/>

With Custom Styling

<AddressInput 
  placeholder="Enter address"
  icon={<Wallet />}
  className="bg-gray-100 rounded-lg"
  onChange={handleAddress}
/>

In a Form

<form onSubmit={handleSubmit}>
  <AddressInput 
    placeholder="Recipient"
    value={recipientAddress}
    onChange={setRecipientAddress}
    className="mb-4"
  />
  <button 
    type="submit" 
    disabled={!recipientAddress}
  >
    Send
  </button>
</form>

Validation States

Initial: No validation indicator
Valid: No visual feedback (clean state)
Invalid: Red ring around input
Disabled: Grayed out appearance

AddressInput

On this page