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

# Full name

> A single-input or split first/last name element.

The `fullName` element renders either one combined name input or two side-by-side first/last inputs. The submitted value shape is identical across both renderings.

## Factory

```typescript theme={null}
overflow.fullName(options?: FullNameElementOptions): FullNameElement
```

## Example

Single-input (default):

```javascript theme={null}
const name = overflow.fullName();
name.mount('#name');
```

Split first/last, side by side:

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

Split first/last, stacked:

```javascript theme={null}
const name = overflow.fullName({ splitMode: 'vertical' });
name.mount('#name');
```

## Options

| Key                                                                         | Type                                  | Default                                                       |
| --------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------- |
| `splitMode`                                                                 | `'horizontal' \| 'vertical'` or unset | unset (single input)                                          |
| `disabled`, `readOnly`, `id`, `ariaLabel`, `locale`, `required`, `validate` | same as other elements                | see [reference](/payment-elements/elements/contact/reference) |
| `fields.fullName`                                                           | `BaseFieldOptions`                    | used when `splitMode` is unset                                |
| `fields.firstName`                                                          | `BaseFieldOptions`                    | used when `splitMode` is set                                  |
| `fields.lastName`                                                           | `BaseFieldOptions`                    | used when `splitMode` is set                                  |

All three field keys are always exposed. Keys that do not match the current mode are ignored at render time, so you can flip modes without rewriting `fields`.

### `splitMode: 'horizontal'`

Renders first and last inputs side by side. Collapses to vertical when the host container is narrower than roughly 440 pixels.

### `splitMode: 'vertical'`

Stacks the inputs at every width.

### Per-half `disabled`

In split mode, per-half `fields.firstName.disabled` and `fields.lastName.disabled` override the element-level `disabled` cascade.

## Value

Identical across both renderings:

```typescript theme={null}
type FullNameValue = { firstName: string; lastName: string } | null;
```

`null` until either half is non-empty. `complete` flips true only when both halves pass their format check.

## `FieldError.field`

* Single mode: `'fullName'`.
* Split mode: `'firstName'` or `'lastName'` per half.

## Inside Checkout

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    fullName: { splitMode: 'horizontal' },
  },
});
```

Also opts in as a slot on address elements. See [Billing address](/payment-elements/elements/address/billing-address).

## See also

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