Autofill Fields From Selection

ProNew

A company picker that fills the address, VAT number and country fields from the choice, leaves anything the person typed untouched, says what it filled and offers Undo. Use this when one choice determines several other fields.

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

Use it in billing and onboarding forms where choosing an organisation fixes its address and tax details, but people may already have typed their own.

Do not use it when the dependent values must never be edited. Make them read-only text.

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	Default	Description
`companies`	`{ id, name, address, vat, country }[]`	-	What can be picked.
`value`	`{ companyId, address, vat, country }`	-	The form values (controlled).
`defaultValue`	same	empty	Initial values.
`onValueChange`	`(values) => void`	-	Runs when the company or a field changes.

Accessibility

After a pick a role="status" line says Filled address, VAT number and country from Acme. and, if the person had typed something, Kept your VAT number.
Fields keep their own labels; a muted from Acme note marks autofilled ones.
Undo autofill restores the values from before the pick and is a real button next to the status.
Fields changed by hand are never overwritten by a later pick; they are listed as kept.

Testing

The pattern ships with a Testing Library test (autofill-fields-from-selection.test.tsx) that covers filling empty fields, keeping typed values, the announcement and Undo.

Guide and examples

When to use it

Use it in billing and onboarding forms where choosing an organisation fixes its address and tax details, but people may already have typed their own.

Do not use it when the dependent values must never be edited. Make them read-only text.

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	Default	Description
`companies`	`{ id, name, address, vat, country }[]`	-	What can be picked.
`value`	`{ companyId, address, vat, country }`	-	The form values (controlled).
`defaultValue`	same	empty	Initial values.
`onValueChange`	`(values) => void`	-	Runs when the company or a field changes.

Accessibility

After a pick a role="status" line says Filled address, VAT number and country from Acme. and, if the person had typed something, Kept your VAT number.
Fields keep their own labels; a muted from Acme note marks autofilled ones.
Undo autofill restores the values from before the pick and is a real button next to the status.
Fields changed by hand are never overwritten by a later pick; they are listed as kept.

Testing

The pattern ships with a Testing Library test (autofill-fields-from-selection.test.tsx) that covers filling empty fields, keeping typed values, the announcement and Undo.