> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Email

> A single-input email address element.

The `email` element renders a labeled `<input type="email">` with built-in format validation.

## Factory

```typescript theme={null}
overflow.email(options?: EmailElementOptions): EmailElement
```

## Example

```javascript theme={null}
const email = overflow.email({
  fields: {
    email: { label: 'Email', placeholder: 'you@example.com' },
  },
});

email.on('onChange', ({ complete, value }) => {
  console.log('email complete:', complete, 'value:', value);
});

email.mount('#email');
```

## Options

| Key            | Type                        | Default                  |
| -------------- | --------------------------- | ------------------------ |
| `disabled`     | `boolean`                   | `false`                  |
| `readOnly`     | `boolean`                   | `false`                  |
| `id`           | `string`                    | auto                     |
| `ariaLabel`    | `string`                    | none                     |
| `locale`       | `string`                    | Overflow instance locale |
| `required`     | `boolean`                   | `true`                   |
| `validate`     | `(value) => string \| null` | none                     |
| `fields.email` | `BaseFieldOptions`          | `{ label: 'Email' }`     |

`fields.email` accepts `label`, `placeholder`, `disabled`, `autoFocus`, `hidden`, `id`, `ariaLabel`.

## Value

```typescript theme={null}
type EmailValue = string | null;
```

`null` until the shopper types anything.

## `FieldError.field`

Always `'email'`.

## Inside Checkout

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    email: { fields: { email: { placeholder: 'you@example.com' } } },
  },
});
```

## See also

* [Contact introduction](/payment-elements/elements/contact/introduction)
* [Contact reference](/payment-elements/elements/contact/reference)