Skip to main content

MUI adapter — all inputs (MUI)

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

Every pre-wired input shipping with @formzk/mui — plus the TextField you register yourself via the Native.Provider. The components shipped from the adapter are:

  • Checkbox — single checkbox with valueKey="checked".
  • CheckboxGroup — multi-select checkboxes bound to an array.
  • RadioGroup — single-value radio list, supports string or numeric value.
  • Switch — single toggle with valueKey="checked".
  • Select — dropdown, supports string or numeric value.

All values flow into a single form state and log on submit. Each input is shown twice where it makes sense — once with the default wrapped layout (FormControl + label), once with the alternative contained layout, so you can compare them side by side.

Loading playground…

What to try​

  • Mix numeric and string values in Select / RadioGroup options — both are supported since v1.1.
  • Change layout from the default wrapped to contained on any item to see how the label placement changes.
  • Add a caption="extra help" prop to any Formzk.MUI.Item to show auxiliary text under the field.
  • Submit the form and look at the resulting JSON — every value type (string, number, boolean, array) round-trips correctly.