Skip to main content

Examples & playground

Live, editable examples that run fully in your browser via Sandpack. Every page has:

  • A code editor — edit the source directly, the preview re-runs on save.
  • A console tab — click Console at the bottom of the preview to see logs.
  • An "Open in CodeSandbox" button that forks the example into a full CodeSandbox project you can keep tinkering with.

Pages​

Each entry is tagged with the package it demonstrates — core examples only need @formzk/core, mui examples additionally pull in @formzk/mui, and tamagui examples pull in @formzk/tamagui + tamagui.

  • Basic form core — the smallest possible @formzk/core setup with yup validation and a custom input component. No MUI.
  • Config-driven form mui — declarative config prop layout with the MUI adapter.
  • MUI adapter — all inputs mui — every pre-wired input: TextField, Checkbox, Switch, RadioGroup, CheckboxGroup, Select.
  • Tamagui adapter — all inputs tamagui — every pre-wired cross-platform input: Input, Checkbox, Switch, RadioGroup, CheckboxGroup, Select.
  • Custom component registration core — register a bespoke color-swatch picker and augment ComponentPropsMap for full type-safety.
  • Multi-step onboarding wizard mui — Stepper-driven form with per-step validation via trigger(), sharing one form instance across steps.
  • Insurance claim form mui — a real-world config-driven form with a conditional field that appears based on another field's value.
  • Custom components showcase mui — multiple custom field components (currency, rating, chips) with a live JSON preview powered by useWatch.

Each sandbox pulls @formzk/core and @formzk/mui from npm — the very same packages you'd install in your own project. So anything that works here works in your app.