> ## 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.

# Contact elements

> Single-purpose inputs for email, full name, phone, and company name.

Contact elements are single-purpose inputs for shopper contact details. Each one is a real `OverflowElement` with the standard lifecycle: mount, subscribe to events, submit or `.destroy()`.

Use them standalone alongside a payment method, or configure them under `contact` inside [Checkout](/payment-elements/elements/checkout/sections/contact).

## Elements

| Element      | Factory                  | Emits                             |
| ------------ | ------------------------ | --------------------------------- |
| Email        | `overflow.email()`       | `string \| null`                  |
| Full name    | `overflow.fullName()`    | `{ firstName, lastName } \| null` |
| Phone        | `overflow.phone()`       | `string \| null`                  |
| Company name | `overflow.companyName()` | `string \| null`                  |

## Standalone example

```javascript theme={null}
const email = overflow.email();
const name = overflow.fullName({ splitMode: 'horizontal' });

email.on('onChange', ({ complete, value }) => console.log(complete, value));
email.mount('#email');
name.mount('#name');
```

## Inside Checkout

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    email: {},
    fullName: {},
    phone: { defaultCountry: 'US' },
    companyName: {},
  },
});
```

Contact is opt-in: omit `contact` (or pass `{}`) to render Checkout with no contact fields.

## Element pages

<CardGroup cols={2}>
  <Card title="Email" href="/payment-elements/elements/contact/email">
    Single-input email address.
  </Card>

  <Card title="Full name" href="/payment-elements/elements/contact/full-name">
    Combined or split first/last name.
  </Card>

  <Card title="Phone" href="/payment-elements/elements/contact/phone">
    International phone with country selector.
  </Card>

  <Card title="Company name" href="/payment-elements/elements/contact/company-name">
    Organization or business name.
  </Card>
</CardGroup>

* [Contact reference](/payment-elements/elements/contact/reference) for the shared options and value shapes.