Production-ready form components for Material UI
A suite of 25+ fully-typed, tree-shakable components, independent of any form library. Production-ready with built-in state management, validation, and a consistent API designed to minimize boilerplate.
npm install @nish1896/mui-components
No form-library lock-in
Components speak value, onValueChange and errorMessage. Any state holder can drive them.
Fully typed
Written in TypeScript from the ground up, with precise prop types for every component.
Tree-shakable
Import only what you use, with subpath exports for mui, mui-pickers and misc components.
Consistent form UX
One label, error and helper-text system across all fields, with accessible names preserved.
All components
Every component ships with a live demo and a full props reference.
Browse all 28 components
MUI
Controlled wrappers around Material UI form fields — text entry, selection, choice and range inputs.
MUI Pickers
Material UI X date and time pickers, each with Desktop, Mobile and Static variants.
Misc
Standalone form components that are not part of Material UI — colour picker, phone input, rich text editor.
Companion project
Using React Hook Form in your application?
@nish1896/rhf-mui-components binds the same label, error and helper-text system straight into React Hook Form's Controller — typed, validated, and ready to drop in.
How it compares
| @nish1896/mui-components | @nish1896/rhf-mui-components | Raw MUI + a form library | |
|---|---|---|---|
| Form library | Any (or none) | React Hook Form | Whatever you wire up |
| Field contract | value / onValueChange / errorMessage | RHF Controller-based | You build it per field |
| Label + helper text + ARIA | Included, consistent | Included, consistent | Hand-rolled per field |
| Validation display | errorMessage prop | RHF error object | Hand-rolled per field |
| MUI prop pass-through | Yes | Yes | N/A (you own the markup) |
| TypeScript types | First-class | First-class | Depends on your wiring |
Standardized on React Hook Form? RHF-MUI Components is the closer fit.
Using more than one form library — or want to drop a component into a screen with only useState? This package keeps that choice open.
Start with the Introduction page to have an overview about this package, or jump straight to Installation section to add the package and wire up your first field.
Sponsors
Supported by generous folks who help keep this project going.
