# 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

```tsx
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

<DocsProvider>
  <AddressInputExample placeholder="0x or ENS" />
</DocsProvider>

```tsx
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)

<DocsProvider>
  <AddressInputExample initialValue="vitalik.eth" placeholder="Enter address or ENS" />
</DocsProvider>

```tsx
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)

<DocsProvider>
  <AddressInputExample initialValue="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
</DocsProvider>

```tsx
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

<DocsProvider>
  <AddressInputExample initialValue="0x1234567890123456789012345678901234567890" disabled={true} />
</DocsProvider>

```tsx
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}
    />
  );
}
```