AddressInput Component

The AddressInput component is an enhanced input for Ethereum addresses and ENS names. It automatically resolves ENS names to addresses (and vice versa), shows ENS avatars when available, displays loading and error states, and renders a deterministic identicon for addresses.

Import

import { AddressInput } from "@scaffold-ui/components";

Props

Prop	Type	Default	Description
`value`	`Address \| string`	-	Current input value. Accepts an Ethereum address or an ENS name.
`onChange`	`(value: Address \| string) => void`	-	Called when the input changes. After ENS resolution, it emits the resolved `Address`.
`name`	`string`	-	Name attribute of the input element.
`placeholder`	`string`	-	Placeholder text for the input.
`disabled`	`boolean`	`false`	Disables the input. While resolving ENS, the input is temporarily disabled.
`style`	`CSSProperties`	-	Custom CSS styles (memoize to prevent re-renders)

Live Examples

Placeholder

import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";
 
function ParentComponent() {
  const [value, setValue] = useState<string>("");
 
  return (
    <AddressInput
      value={value}
      onChange={setValue}
      placeholder="0x or ENS"
    />
  );
}

Default value (ENS Name)

import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";
 
function ParentComponent() {
  const [value, setValue] = useState<string>("vitalik.eth");
 
  return (
    <AddressInput
      value={value}
      onChange={setValue}
      placeholder="Enter address or ENS"
    />
  );
}

Default value (Ethereum Address)

import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";
 
function ParentComponent() {
  const [value, setValue] = useState<string>("0xd8da6bf26964af9d7eed9e03e53415d37aa96045");
 
  return (
    <AddressInput
      value={value}
      onChange={setValue}
    />
  );
}

Disabled State

import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";
 
function ParentComponent() {
  const [value, setValue] = useState<string>("0x1234567890123456789012345678901234567890");
 
  return (
    <AddressInput
      value={value}
      onChange={setValue}
      disabled={true}
    />
  );
}