Full name

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

overflow.fullName(options?: FullNameElementOptions): FullNameElement

Example

Single-input (default):

const name = overflow.fullName();
name.mount('#name');

Split first/last, side by side:

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

Split first/last, stacked:

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

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

overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    fullName: { splitMode: 'horizontal' },
  },
});

Also opts in as a slot on address elements. See Billing address.

Get started

Elements

Options

Events

Theming

Guides

Factory

Example

Options

`splitMode: 'horizontal'`

`splitMode: 'vertical'`

Per-half `disabled`

Value

`FieldError.field`

Inside Checkout

See also

​Factory

​Example

​Options

​splitMode: 'horizontal'

​splitMode: 'vertical'

​Per-half disabled

​Value

​FieldError.field

​Inside Checkout

​See also

Factory

Example

Options

`splitMode: 'horizontal'`

`splitMode: 'vertical'`

Per-half `disabled`

Value

`FieldError.field`

Inside Checkout

See also