Skip to main content

Custom components showcase (MUI)

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

A collection of bespoke field components — currency input, star rating, tag chips — registered alongside the MUI adapter and bound to a single form. Each accepts value + onChange, the only contract Formzk needs.

A small sidebar subscribes to the whole form via useWatch and renders a live JSON preview, which is a handy debug tool while building any form.

Loading playground…

What to try​

  • Edit any field and watch the right-hand JSON preview update on the next keystroke — it's powered by useWatch.
  • Open components/CurrencyInput.tsx — note that it just speaks value / onChange. That's the only contract a custom component needs to be Formzk-compatible.
  • Add a fourth custom component (e.g. a slider) — register it in the Provider config and bind a Formzk.MUI.Item to it.