Inputs
AddressInput
AddressInput gives you the address-entry behavior most blockchain products need by default: validation, identity feedback, and quick actions for paste and clear.
Validation mode
The component validates common Ethereum address formatting without extra setup.
Identity feedback
Valid values can render an identicon so the user sees a visual confirmation immediately.
State model
Own the value in your app state and react to validation changes as needed.
Use it in transfer flows
A good default for send flows, contact entry, address books, and transaction forms.
Hide extra controls when needed
Turn off paste, clear, or identicon affordances when embedding the field into tight or minimal UIs.
Basic usage
The default state supports paste, clear, and automatic validation while you type.
import { useState } from 'react';import { AddressInput } from '@avalabs/avacloud-kit-ui-preview';export function Example() {const [address, setAddress] = useState('');return <AddressInput value={address} onChange={setAddress} />;}Valid address state
A valid address highlights successfully and shows the identicon affordance.
<AddressInputvalue="0x71C7656EC7ab88b098defB751B7401B5f6d8976F"onChange={setAddress}/>Custom error copy
Use your own error message when the field is part of a larger validation flow.
<AddressInputvalue={address}onChange={setAddress}errorMessage="Please enter a valid Ethereum address"/>Minimal presentation
Disable identicon and actions when you want the validation behavior without the extra affordances.
<AddressInputvalue={address}onChange={setAddress}showPasteButton={false}showClearButton={false}showIdenticon={false}/>Props
Prop
Type
Validation utility
import { isValidAddress } from '@avalabs/avacloud-kit-ui-preview';
isValidAddress('0x1234567890123456789012345678901234567890'); // true
isValidAddress('0xinvalid'); // false
isValidAddress('no-prefix'); // false