$ show stackworx/formik-mui
This is a monorepo containing two npm packages (`formik-mui` and `formik-mui-x-date-pickers`) that provide React component bindings between Formik and MUI (Material-UI). The `formik-mui` package wraps common MUI form components (TextField, Select, Checkbox, Switch, Autocomplete, RadioGroup, ToggleButtonGroup, etc.) to automatically manage Formik state (value, error, touched, disabled during submission). The `formik-mui-x-date-pickers` package does the same for MUI X date and time pickers (DatePicker, DateTimePicker, TimePicker, and their desktop/mobile/static variants). Both packages export a set of React components that accept Formik's `FieldProps` and MUI component props, along with corresponding `fieldTo*` mapper functions for custom component creation. The codebase is well-structured with TypeScript, comprehensive unit tests using Vitest and Testing Library, Storybook for interactive documentation, and a Docusaurus documentation site. It is actively maintained with recent commits and CI pipelines.
The LLM identified 2 files worth highlighting for reuse:
A small utility function that creates an `onError` handler for MUI X date pickers. It compares the incoming error from the picker with the current Formik field error and only calls `setFieldError` when they differ, preventing unnecessary re-renders and avoiding conflicts between MUI's internal error state and Formik's validation. This pattern is reusable in any Formik+MUI date picker integration and demonstrates careful handling of dual error sources.
The `Select` component and its `fieldToSelect` mapper implement a non-obvious workaround for Formik's out-of-sync validation issue with MUI's Select component. Instead of using `onChange` (which can cause stale values during validation), it uses the `onClose` event to asynchronously set the field value and then trigger validation via `setFieldTouched`. This ensures Formik validates with the correct latest value. The component also composes `FormControl`, `InputLabel`, `FormHelperText`, and `MuiSelect` into a single cohesive unit, exposing props for each sub-component. This pattern is a reusable solution for integrating any MUI select-like component with Formik.