Skip to main content

Insurance claim submission (MUI)

Package: @formzk/mui (also pulls in @formzk/core)

A real-world form built declaratively with Formzk.MUI.Form's config prop. It mixes inputs, selects, switches, and a conditional field that only appears when the category is Other.

The trick for conditional fields: a small inner component subscribes to the relevant field via useWatch and is mounted as a content item in the config. It shows or hides itself based on the watched value while staying inside the same form context.

Loading playground…

What to try​

  • Change Claim category to Other — the additional Specify category input appears, and yup's conditional when() rule now requires it.
  • Submit with empty required fields — every error is collected by Formzk.MUI.Errors.
  • Add a new row to config with another field (e.g. policyHolderPhone) without touching JSX — that's the value of config-driven layout.