# AddressField

A field component to display Ethereum Addresses.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { AddressField } from '@aragon/ui'

function App() {
  return <AddressField address="0xcafE1A77e84698c83CA8931F54A755176eF75f2C" />
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-147008c38063d0829444d8cb48ede446a213d920%2FSchermata%202022-06-25%20alle%2023.08.14.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `address` <a href="#address" id="address"></a>

| TYPE     | DEFAULT VALUE   |
| -------- | --------------- |
| `String` | None (Required) |

Adress to display in the field.

#### **Example:**

```jsx
<AddressField address="0xcafE1A77e84698c83CA8931F54A755176eF75f2C" />
```

#### `autofocus` <a href="#autofocus" id="autofocus"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `true`        |

Focus the text field when the component gets mounted.

#### `icon` <a href="#icon" id="icon"></a>

| TYPE   | DEFAULT VALUE |
| ------ | ------------- |
| `Node` | None          |

Icon to display in the field. Can pass anything that can be rendered, such as num, string, DOM elements, an array of them, or fragments that contain them.

#### **Example:**

```jsx
<AddressField
  address="0xcafE1A77e84698c83CA8931F54A755176eF75f2C"
  icon={<img />}
/>
```