Contacts with Nested Email Lists

ProNew

A list of contacts where each contact has its own list of emails: two field arrays inside each other with separate limits, stable keys through reorders, and errors that name the contact. Use this when a repeated record contains another repeated field.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A repeated record owns a repeated sub-field (people with several emails, orders with several lines, plans with several features).

Do not use it when: Avoid nesting more than two levels in a form; use a master-detail view instead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ name, emails: string[] }[]`	Starting contacts.
`onChange`	`(contacts) => void`	After every edit in either list.

Accessibility

Two nested fieldsets with legends ("Contacts", "Emails for contact 1"); every row is a named group, so a screen reader announces where the focus is ("email 2 of 3").
Email inputs have hidden labels that include both numbers, because a visible label per row would repeat. Errors name the contact.
Each list has its own limits and announcements; the outer list can be reordered without losing the inner lists (stable row ids).

Testing

The pattern ships with a Testing Library test (nested-contact-emails.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A repeated record owns a repeated sub-field (people with several emails, orders with several lines, plans with several features).

Do not use it when: Avoid nesting more than two levels in a form; use a master-detail view instead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ name, emails: string[] }[]`	Starting contacts.
`onChange`	`(contacts) => void`	After every edit in either list.

Accessibility

Two nested fieldsets with legends ("Contacts", "Emails for contact 1"); every row is a named group, so a screen reader announces where the focus is ("email 2 of 3").
Email inputs have hidden labels that include both numbers, because a visible label per row would repeat. Errors name the contact.
Each list has its own limits and announcements; the outer list can be reordered without losing the inner lists (stable row ids).

Testing

The pattern ships with a Testing Library test (nested-contact-emails.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.