{"id":13197,"library":"formik-mui-lab","title":"Formik MUI Lab Bindings","description":"formik-mui-lab provides a set of Formik-compatible wrapper components for specialized Material-UI (MUI) components found in the `@mui/lab` package. This library simplifies integrating advanced UI elements like Autocomplete, Rating, and ToggleButtonGroup within Formik-driven forms, abstracting away the boilerplate of connecting Formik's state management to MUI Lab's component props. The current stable version is 1.0.0, released in conjunction with `formik-mui@4.0.0`. Releases tend to align with major MUI version upgrades, with a focus on maintaining compatibility and introducing necessary breaking changes to support new MUI features. It requires Formik >= 2.0.0 and MUI 5 or higher, making it suitable for modern React applications using these libraries. Key differentiators include tight integration with Formik's `Field` component and robust TypeScript support.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/stackworx/formik-mui","tags":["javascript","react","formik","material-ui","mui","lab","form","pickers","typescript"],"install":[{"cmd":"npm install formik-mui-lab","lang":"bash","label":"npm"},{"cmd":"yarn add formik-mui-lab","lang":"bash","label":"yarn"},{"cmd":"pnpm add formik-mui-lab","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required by Material-UI (MUI 5+) for styling.","package":"@emotion/react","optional":false},{"reason":"Required by Material-UI (MUI 5+) for styling.","package":"@emotion/styled","optional":false},{"reason":"The core Material-UI Lab components that this package provides Formik bindings for.","package":"@mui/lab","optional":false},{"reason":"The core Material-UI components framework that `@mui/lab` builds upon.","package":"@mui/material","optional":false},{"reason":"The form state management library that this package integrates with.","package":"formik","optional":false},{"reason":"The base UI library for all React components.","package":"react","optional":false},{"reason":"A small utility for displaying development warnings.","package":"tiny-warning","optional":true}],"imports":[{"note":"Use named import for ES Modules. CommonJS `require` is not officially supported for modern Formik-MUI versions.","wrong":"const Autocomplete = require('formik-mui-lab').Autocomplete;","symbol":"Autocomplete","correct":"import { Autocomplete } from 'formik-mui-lab';"},{"note":"Components are directly exported from the main package entry point, not nested paths.","wrong":"import Rating from 'formik-mui-lab/Rating';","symbol":"Rating","correct":"import { Rating } from 'formik-mui-lab';"},{"note":"The component names usually mirror the original MUI Lab component names directly.","wrong":"import { ToggleButtonGroupField } from 'formik-mui-lab';","symbol":"ToggleButtonGroup","correct":"import { ToggleButtonGroup } from 'formik-mui-lab';"}],"quickstart":{"code":"import React from 'react';\nimport { Formik, Form, Field } from 'formik';\nimport { Autocomplete, Rating } from 'formik-mui-lab';\nimport { TextField, Button, Box, Typography } from '@mui/material';\n\ninterface MyFormValues {\n  favoriteColor: string | null;\n  userRating: number | null;\n}\n\nconst initialValues: MyFormValues = {\n  favoriteColor: null,\n  userRating: null,\n};\n\nconst colorOptions = ['Red', 'Green', 'Blue', 'Yellow', 'Purple'];\n\nfunction MyForm() {\n  return (\n    <Box sx={{ p: 3, maxWidth: 500, mx: 'auto', border: '1px solid #ccc', borderRadius: '8px' }}>\n      <Typography variant=\"h5\" component=\"h1\" gutterBottom>\n        Formik MUI Lab Example\n      </Typography>\n      <Formik\n        initialValues={initialValues}\n        onSubmit={(values, { setSubmitting }) => {\n          setTimeout(() => {\n            alert(JSON.stringify(values, null, 2));\n            setSubmitting(false);\n          }, 500);\n        }}\n      >\n        {({ submitForm, isSubmitting, values }) => (\n          <Form>\n            <Field\n              component={Autocomplete}\n              name=\"favoriteColor\"\n              label=\"Favorite Color\"\n              options={colorOptions}\n              getOptionLabel={(option: string) => option}\n              sx={{ mb: 2 }}\n              renderInput={(params: any) => <TextField {...params} label=\"Favorite Color\" variant=\"outlined\" />} // `any` for simplicity\n              isOptionEqualToValue={(option: string, value: string) => option === value}\n            />\n            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>\n                <Typography component=\"legend\" sx={{ mr: 1 }}>Your Rating:</Typography>\n                <Field\n                  component={Rating}\n                  name=\"userRating\"\n                  max={5}\n                  precision={0.5}\n                />\n            </Box>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              color=\"primary\"\n              disabled={isSubmitting}\n            >\n              Submit\n            </Button>\n            <pre style={{ marginTop: '16px', backgroundColor: '#f0f0f0', padding: '10px', borderRadius: '4px' }}>\n              {JSON.stringify(values, null, 2)}\n            </pre>\n          </Form>\n        )}\n      </Formik>\n    </Box>\n  );\n}\n\nexport default MyForm;","lang":"typescript","description":"This example demonstrates how to use Formik-MUI Lab's Autocomplete and Rating components within a Formik form, showing form submission and state management."},"warnings":[{"fix":"Upgrade your project's Material-UI packages (`@mui/material`, `@mui/lab`, etc.) to v5. Refer to the official Material-UI v5 migration guide for details on API and styling changes. Ensure `@emotion/react` and `@emotion/styled` are installed.","message":"Version 1.0.0 (and its alpha pre-releases) fully upgrades to Material-UI v5. This introduces significant breaking changes for applications still using Material-UI v4, particularly concerning styling solutions (Emotion replacing JSS) and API changes.","severity":"breaking","affected_versions":">=1.0.0-alpha.1"},{"fix":"Upgrade your Formik package to version 2.0.0 or later: `npm install formik@^2.0.0` or `yarn add formik@^2.0.0`.","message":"This package requires Formik version 2.0.0 or higher. Using an older version of Formik will result in compatibility issues or runtime errors, as the internal APIs used by the bindings have changed significantly.","severity":"breaking","affected_versions":"<2.0.0 of formik"},{"fix":"Always provide a `renderInput` prop to `Autocomplete` components, usually a `<TextField {...params} />` from `@mui/material`. Remember to import `TextField` separately: `import { TextField } from '@mui/material';`.","message":"The `renderInput` prop for Autocomplete components, which is crucial for displaying the text input, often requires an MUI `TextField`. Ensure you import and provide this component correctly, along with spreading `params` to it.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Formik bindings with Date/Time Pickers, you should look for `formik-mui-x-date-pickers` or similar community packages that specifically target `@mui/x-date-pickers`. Do not expect these components to be exported from `formik-mui-lab`.","message":"While the `pickers` keyword is present, this package primarily wraps components from `@mui/lab`. Date and Time Picker components are now part of `@mui/x-date-pickers` and are not directly provided as wrappers by `formik-mui-lab`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your component is rendered within a `<Formik>` and `<Form>` component. Verify that the `Field` component has a `name` prop matching a key in your `initialValues`.","cause":"This typically occurs when a Formik-MUI Lab component is used outside of a Formik context, or if the `name` prop is missing from the `Field` component.","error":"TypeError: Cannot read properties of undefined (reading 'field')"},{"fix":"Double-check the component name in your import statement (e.g., `Autocomplete`, `Rating`) and ensure it is correctly destructured from `formik-mui-lab`.","cause":"This error often indicates that a component imported from `formik-mui-lab` is undefined, usually due to a misspelling in the import or the component not being exported from the package.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Ensure you have a single, consistent version of React installed across your project. Check your `package-lock.json` or `yarn.lock` for duplicate React entries. Clear node_modules and reinstall dependencies.","cause":"This package, like Formik and Material-UI, relies on React Hooks. This error can occur if you have multiple versions of React installed, or incorrect build configurations.","error":"TypeError: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}