UNPKG

mui-dynamic-field

Version:

A dynamic and customizable input field component for React, built with Material UI & TypeScript.

81 lines (57 loc) 2.06 kB
# 📝 mui-dynamic-field > **A dynamic and customizable input field component for React, built with Material UI & TypeScript.** ## 🚀 Features **Multiple Input Types** `text`, `password`, `number`, `dropdown`, `date`, `time`, `checkbox`, etc. **Material UI Integration** Uses MUI components for consistent design. **Customizable Props** Control size, label, placeholder, validation rules, and more. **Validation Support** Includes regex validation, min/max length, required fields, etc. **TypeScript Support** Fully typed for better DX. **Lightweight & Performant** Optimized for reusability and efficiency. --- ## 📦 Installation Install via **npm** or **yarn**: ```sh npm install mui-dynamic-field # or yarn add mui-dynamic-field ``` --- ## 🔧 Usage Example ```tsx import { DynamicField } from "mui-dynamic-field"; export default function Example() { return ( <DynamicField size="small" color="primary" item={{ _key="inputField" placeholder="Input field" fieldType="text" }} /> ); } ``` --- ## 🔗 Supported Input Types | Type | Description | | -------------- | ---------------------------------- | | `text` | Standard text input field | | `password` | Input field with visibility toggle | | `number` | Numeric input field | | `dropdown` | Select dropdown | | `date` | Date picker | | `time` | Time picker | | `datetime` | Date and time picker | | `checkbox` | Checkbox input | | `autocomplete` | Autocomplete dropdown | --- ## 📜 License MIT --- ## 🤝 Contributing Contributions are welcome! Feel free to submit issues and pull requests. --- ## 📞 Support For any issues or feature requests, please open an issue on [GitHub](https://github.com/yourusername/mui-dynamic-field/issues).