Sync Default Values

Used to sync the value of the wrapped input to another input. Will stop syncing once a manual selection is made on the wrapped field. Use case: matching the default value of an end date to the start date since the end date is always after the start date.

Current Status

Syncs the value of the wrapped input to another input until a manual selection is made on the wrapped field.

Future

Add support for conditions such as strict matching values between fields

Examples

TBD

How to use

Create component

Copy the code from the sandbox above and paste it into a new file (e.g. SyncDefaultValue.tsx)

Add dependent components

Needs Field component and a child component like Date Pick

yourform.tsx

  <SyncDefaultValue
    name="exampleDatePickEnd"
    syncDefaultWith="exampleDatePickStart"
  >
    <Field name="exampleDatePickEnd" defaultValue="">
        <Field.GroupLabel type="standard">End date:</Field.GroupLabel>
        <Field.Control>
            <DatePick startYearRange={1992} endYearRange={2025} />
        </Field.Control>
    </Field>
  </SyncDefaultValue>

Setup `defaultValues` and `zodSchema` in `Form`

Details in Form component

Component API

Required Prop	Type	Description
name	string	Name of the wrapped field. This will be synced to the value of the syncDefaultWith input
syncDefaultWith	string	Name of the field to sync with.
children	Field or WatchField	Provides input functionality

Optional Prop	Type	Description

Usage Notes

The wrapped input must use a Field component or a WatchField component
Requires FormProvider be used in parent form

Form Accordion