npm package: @react-solutions/inputs
Description: A input library for react
Author: React Solutions
Latest version: 1.0.2

# @react-solutions/inputs

<div align="center">

[![npm version](https://img.shields.io/npm/v/@react-solutions/inputs.svg?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
[![npm downloads](https://img.shields.io/npm/dm/@react-solutions/inputs.svg?color=green&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/inputs)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@react-solutions/inputs?color=orange&style=for-the-badge)](https://bundlephobia.com/package/@react-solutions/inputs)

</div>
Lightweight React form input components and react-hook-form wrappers.

Quick highlights:

- Exports two families: direct controlled components and react-hook-form wrappers.
- Built with TypeScript. Declarations are emitted on build.

## Install

Install the package and peer dependencies in the consuming app:

```bash
npm install @react-solutions/inputs
# ensure peer deps exist in the host app:
npm install react react-dom @mui/material @emotion/react @emotion/styled  react-hook-form date-fns
```

## Usage

1. controlled components (use with useState)

Example: `@react-solutions/inputs` demonstrates using components like `TextInputField` and `SelectInputField` with `value` / `onChange` props.

```tsx
import { TextInputField, SelectInputField } from "@react-solutions/inputs";
// in component:
<TextInputField
	name="name"
	value={name}
	onChange={(e) => setName(e.target.value)}
/>;
```

2. react-hook-form wrappers (preferred when using react-hook-form)

Example: `@react-solutions/inputs` shows usage of `FormInputTextField`, `FormInputSelect`, etc.

```tsx
import { FormInputTextField, FormInputSelect } from "@react-solutions/inputs";
// inside a form using react-hook-form's control:
<FormInputTextField
	name="email"
	label="Email"
	control={control}
	errors={errors}
/>;
```

## Peer dependencies

This package declares several peerDependencies. Consumers must provide compatible versions of:

- react, react-dom
- @mui/material, @emotion/react, @emotion/styled
- @mui/x-date-pickers (for date/time inputs)
- react-hook-form (for HookForm wrappers)
- date-fns

See `package.json` for exact version ranges.

## 🌍 **Browser Support**

<div align="left">

| Browser                                                                       | Version | Status       |
| ----------------------------------------------------------------------------- | ------- | ------------ |
| ![Chrome](https://img.shields.io/badge/Chrome-60%2B-green?logo=google-chrome) | 60+     | ✅ Supported |
| ![Firefox](https://img.shields.io/badge/Firefox-60%2B-green?logo=firefox)     | 60+     | ✅ Supported |
| ![Safari](https://img.shields.io/badge/Safari-12%2B-green?logo=safari)        | 12+     | ✅ Supported |
| ![Edge](https://img.shields.io/badge/Edge-79%2B-green?logo=microsoft-edge)    | 79+     | ✅ Supported |

</div>

## License

MIT

<div align="center">

![license](https://img.shields.io/badge/MIT-red?style=for-the-badge)
![license](https://img.shields.io/badge/License-Proprietary-red?style=for-the-badge)

</div>

## 📝 TypeScript Support

This package is written in TypeScript and includes full type definitions. All exported functions and hooks are fully typed.

Made with ❤️ for React developers