Conditional Contact Fields

ProNew

A radio choice that reveals the one field it needs (email or phone), moves no focus, announces the change, and drops the hidden field's value and error from the submitted data. Use this when an answer decides which follow-up field exists.

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

One answer makes another field relevant or required (contact by email or by phone, "other: please specify").

Do not use it when: When the hidden data is still needed after the person changes their mind. Keep it in state instead of dropping it.

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
`onSubmit`	`({ method, email? , phone? }) => void \| Promise<void>`	Receives only the field that belongs to the chosen method.

Accessibility

The choice is a radio group inside a fieldset with a legend, controlling a named group (aria-controls) that holds the revealed field.
Switching does not move focus, so a keyboard user stays on the radio and can keep switching; Tab then enters the revealed field.
Only the visible field is validated and submitted, so a hidden field can never block the form with an error nobody can see. What was typed in the other field is kept in case the person switches back.

Testing

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

Guide and examples

When to use it

One answer makes another field relevant or required (contact by email or by phone, "other: please specify").

Do not use it when: When the hidden data is still needed after the person changes their mind. Keep it in state instead of dropping it.

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
`onSubmit`	`({ method, email? , phone? }) => void \| Promise<void>`	Receives only the field that belongs to the chosen method.

Accessibility

The choice is a radio group inside a fieldset with a legend, controlling a named group (aria-controls) that holds the revealed field.
Switching does not move focus, so a keyboard user stays on the radio and can keep switching; Tab then enters the revealed field.
Only the visible field is validated and submitted, so a hidden field can never block the form with an error nobody can see. What was typed in the other field is kept in case the person switches back.

Testing

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