Watch Field

Used for conditionally rendering an input based on the value of another input. Is otherwise identical to the Field component.

Current Status

Adds control to a component. Identical to Field component

Future

Add support for conditions other than strict value equality

Examples

TBD

How to use

Create component

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

Add dependent components

Needs Field component

yourform.tsx

<WatchField
  conditionLogic={{
    watchName: "radioExample",
    watchValue: "suzuki",
  }}
  name="conditionalExample"
>
  <Field.GroupLabel>WatchField Input:</Field.GroupLabel>
  <Field.Tip>
    This input is shown conditionally based on the specified watchValue of the
    watchName input.
  </Field.Tip>
  <Field.Control>
    <Input type="text" />
  </Field.Control>
</WatchField>

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

Details in Form component

Component API

Required Prop	Type	Description
conditionLogic	{ watchName: string; watchValue: string \| boolean \| number }	The name and value of the input to watch.
name	string	The input's name

Optional Prop	Type	Description
validateOnBlur?	Boolean	If true then runs custom logic onBlur. 🚧 WIP.

Field Form