@react-solutions/inputs

A professional, comprehensive library of React form components built on top of Material UI. It offers two powerful ways to build forms: Standard Controlled Components for manual state management and HookForm Components for seamless integration with react-hook-form.

🚀 Key Features

• 🏗️ Dual Architecture - Choose between pure controlled components or battle-tested react-hook-form wrappers.
• 🎨 Material UI Based - Premium look and feel out of the box with full customization support.
• 🛡️ Type-Safe - Written in TypeScript with exhaustive prop definitions and intellisense.
• 📋 Dynamic Form Builders - Includes DemoForm and DemoHookForm to build entire forms from a simple JSON schema.
• ⚡ Optimized Performance - Lightweight wrappers that minimize re-renders.
• 🌍 Next.js & React Ready - Full compatibility with Next.js App Router (Client Components) and standard React SPAs.

📦 Compatibility

Next.js (App Router)

All components in this library are client components, making them fully compatible with the Next.js App Router. They can be imported and used directly within your client-side components.

React (CRA / Vite)

Works out of the box with any React environment. No additional configuration required.

📦 Installation

npm install @react-solutions/inputs

Peer Dependencies

Ensure the following packages are installed in your project:

npm install @mui/material @emotion/react @emotion/styled react-hook-form date-fns @mui/x-date-pickers

🛠 Available Fields Group-wise

1. Text & Numeric Inputs

Standard text-based inputs with built-in validation support and consistent styling.

| Standard Component | HookForm Wrapper | Description | | :----------------- | :----------------------- | :-------------------------------------------- | | TextInputField | FormInputTextField | Standard text input for names, emails, etc. | | PasswordField | FormInputPasswordField | Secure password field with visibility toggle. | | NumberField | FormInputNumberField | Optimized for numeric values. | | TelInputField | FormInputTelField | Formatted for telephone numbers. | | SearchInputField | FormInputSearchField | Specialized search input with clear icon. | | OTPField | FormInputOTPField | Multi-digit OTP input for authentication. | | TextArea | FormInputTextArea | Multi-line text input for long descriptions. |

2. Selection & Dropdowns

Powerful selection components ranging from simple selects to complex multi-autocomplete fields.

| Standard Component | HookForm Wrapper | Description | | :------------------ | :--------------------------- | :------------------------------------- | | SelectInputField | FormInputSelect | Standard dropdown selection. | | - | FormInputMultiSelect | Multi-select dropdown with chips. | | AutoCompleteField | FormInputAutoComplete | Searchable dropdown with autocomplete. | | - | FormInputMultiAutoComplete | Searchable multi-selection. |

3. Choices & Toggles

Boolean and multiple-choice inputs for settings and preferences.

| Standard Component | HookForm Wrapper | Description | | :---------------------- | :-------------------------- | :------------------------------------------- | | CheckBoxField | FormInputCheckBox | Single checkbox for boolean values. | | CheckBoxFieldGroup | FormInputCheckBoxGroup | Group of checkboxes for multiple selections. | | RadioButtonField | FormInputSingleRadio | Single radio button. | | RadioButtonFieldGroup | FormInputRadioButtonGroup | Standard radio group for single choice. | | SwitchField | FormInputSwitch | On/Off toggle switch. | | SliderField | FormInputSlider | Range slider for numeric ranges. | | ToggleButtonField | FormInputToggleButton | Button-style toggle selection. |

4. Date & Time Pickers

Rich date and time selection components using @mui/x-date-pickers.

| Standard Component | HookForm Wrapper | Description | | :------------------ | :-------------------- | :--------------------------------------- | | DatePickerField | FormInputDatePicker | Full date picker with calendar. | | TimePickerField | FormInputTimePicker | Time selection with clock interface. | | TimeClockField | FormInputTimeClock | Dedicated analog-style clock selection. | | DateCalendarField | FormInputCalendar | Inline calendar view for date selection. |

5. Specialty Inputs

| Standard Component | HookForm Wrapper | Description | | :----------------- | :--------------------- | :------------------------------------------- | | ColorPickerField | FormInputColorPicker | Visual color selection tool. | | FileUploadField | FormInputFileUpload | Styled file upload and dropzone integration. |

🏗 Dynamic Form Builders (Demo Forms)

For rapid development, we provide two high-level components that can render entire forms from a configuration object. This is ideal for checking field behavior or building dynamic admin panels.

Standard Demo Form

Used for building forms that manage their own internal state or use external controlled state.

import { DemoForm } from "@react-solutions/inputs";

<DemoForm />;

HookForm Demo Form

The ultimate way to build complex, validated forms with react-hook-form.

import { DemoHookForm } from "@react-solutions/inputs";

<DemoHookForm />;

🌍 Browser Support

| Browser | Version | Status | | :------ | :------ | :----------- | | Chrome | 60+ | ✅ Supported | | Firefox | 60+ | ✅ Supported | | Safari | 12+ | ✅ Supported | | Edge | 79+ | ✅ Supported |

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT

Made with ❤️ for React developers