Discriminated Union Demo
Using z.discriminatedUnion() for type-safe mode switching

Recommended: @zod-utils/react-hook-form

  • Clean schemas: z.string().min(1)
  • Auto type transformation for forms
  • getSchemaDefaults() for discriminated unions
  • Best DX for 2+ forms

About this form:

  • Schema uses discriminatedUnion with mode field
  • Different fields appear based on create vs edit mode
  • TypeScript enforces correct fields per mode
  • Form fields adjust automatically when mode changes
Current Mode: create

Required field

Optional in create mode

Addresses
Social Networks (Optional)

Type Information:

  • name is required (string)
  • age is optional (number)
  • id and bio fields do not exist