Conditional Fields

Use form.setCondition(field, predicate) to show or hide a field based on other form values. The predicate receives a snapshot of the current values and must return true (show) or false (hide).

const myForm = createForm(schema)

myForm.setCondition('vatNumber', (values) => values.isBusinessAccount === true)
myForm.setCondition(
  'companyName',
  (values) => values.isBusinessAccount === true,
)

How it works

• When a field is hidden, it is unregistered from React Hook Form — its value is removed from the submitted object and its validation rules do not run.
• When a field becomes visible again, it is re-registered and its previous value is restored. This means switching a field off and back on does not lose the user's input.
• Conditions are evaluated reactively on every form value change.

Inline condition (without createForm)

For simple cases you can skip createForm and pass a condition predicate directly in the fields prop:

<AutoForm
  fields={{
    vatNumber: {
      condition: (values) => values.isBusinessAccount === true,
    },
    companyName: {
      condition: (values) => values.isBusinessAccount === true,
    },
  }}
  ...
/>

Use setCondition (via createForm) when the logic is shared across multiple <AutoForm> instances, or when you want to colocate all form behaviour in one place outside the component tree.

Multiple conditions

You can call setCondition multiple times for different fields, or combine multiple checks in one predicate:

myForm.setCondition(
  'proFeature',
  (values) => values.plan === 'pro' || values.plan === 'enterprise',
)

Live Example

Live Editor

const schema = z.object({
  accountType: z.enum(['personal', 'business']),
  fullName: z.string().min(1, 'Required'),
  // Business-only fields
  companyName: z.string().optional(),
  vatNumber: z.string().optional(),
  companySize: z.enum(['1-10', '11-50', '51-200', '200+']).optional(),
  // Personal-only fields
  dateOfBirth: z.string().optional(),
})

const accountForm = createForm(schema)

accountForm.setCondition('companyName', (v) => v.accountType === 'business')
accountForm.setCondition('vatNumber', (v) => v.accountType === 'business')
accountForm.setCondition('companySize', (v) => v.accountType === 'business')
accountForm.setCondition('dateOfBirth', (v) => v.accountType === 'personal')

function App() {
  const [result, setResult] = React.useState(null)
  return (
    <div style={{ fontFamily: 'system-ui', maxWidth: 440 }}>
      <AutoForm
        form={accountForm}
        defaultValues={{ accountType: 'personal' }}
        fields={{
          accountType: { label: 'Account Type' },
          fullName: { label: 'Full Name' },
          dateOfBirth: { label: 'Date of Birth' },
          companyName: { label: 'Company Name' },
          vatNumber: { label: 'VAT Number' },
          companySize: { label: 'Company Size' },
        }}
        onSubmit={(v) => setResult(v)}
      />
      {result && (
        <pre
          style={{
            marginTop: '1rem',
            background: 'var(--ifm-color-emphasis-200)',
            padding: '1rem',
            borderRadius: 6,
          }}
        >
          {JSON.stringify(result, null, 2)}
        </pre>
      )}
    </div>
  )
}

render(<App />)

Result

Loading...